私はデータテーブルの例で作業しており、ページをロードするときに次のようなエラーが発生します:Datatables warning(table id = 'example'):データテーブルを再初期化できません。このテーブルのDataTablesオブジェクトを取得するには、引数を渡さないか、bRetrieveおよびbDestroyのドキュメントを参照してください。
私はfnRowCallbackをテストしようとしていました
<%@ page language="Java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>DataTables live example</title>
<script type="text/javascript" charset="utf-8" src="DataTables/media/js/jquery.js"></script>
<script class="jsbin" src="http://datatables.net/download/build/jquery.dataTables.nightly.js"></script>
<style type="text/css">
@import "DataTables/media/css/demo_table.css";
</style>
</head>
<body id="dt_example">
<script>
$(document).ready(function() {
$('#example').dataTable();
} );
$(document).ready( function() {
$('#example').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
// Bold the grade for all 'A' grade browsers
if ( aData[4] == "A" )
{
$('td:eq(4)', nRow).html( '<b>A</b>' );
}
}
} );
} );
</script>
<div id="container">
<h1>Live example</h1>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center"> 4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
これで何が間違っていますか?
データテーブルを2回初期化しているのはなぜですか?
// Take this off
/*
$(document).ready(function() {
$( '#example' ).dataTable();
} );
*/
$(document).ready( function() {
$( '#example' ).dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
// Bold the grade for all 'A' grade browsers
if ( aData[4] == "A" )
{
$('td:eq(4)', nRow).html( '<b>A</b>' );
}
}
} );
} );
「bDestroy」:trueをオプションオブジェクトリテラルに追加してみてください。
$('#dataTable').dataTable({
...
....
"bDestroy": true
});
ソース: iodocs.com
または最初のを削除します:
$(document).ready(function() {
$('#example').dataTable();
} );
あなたの場合は最良のオプションですvjk。
新しいdatatable
を作成する前に次のコードを使用して、古いdatatable
を破棄することもできます。
$("#example").dataTable().fnDestroy();
DataTableに「bDestroy」を追加:true
$('#example').dataTable({
....
stateSave: true,
"bDestroy": true
});
それが動作します。
destroy:true
を構成に追加して、既存のデータテーブルが再初期化される前に削除されることを確認できます。
$('#example').dataTable({
destroy: true,
...
});
この問題は、dataTableを複数回初期化した場合に発生します。次に、以前のものを削除する必要があります。
一方、新しいデータテーブルを作成する前に、次のコードを使用して、この方法で古いデータテーブルを破棄することもできます。
$(“#example”).dataTable().fnDestroy();
別のシナリオがあります。たとえば、同じテンプレートの同じテーブルにアクセスする応答が複数のajaxリクエストを送信すると、エラーが発生しますまたはそれ以降。その後、データテーブル設定でbRetrieve TRUE
を設定する必要があります。それだけです。
これは私のシナリオです:
<script type="text/javascript">
$(document).ready(function () {
$('#DatatableNone').dataTable({
"bDestroy": true
}).fnDestroy();
$('#DatatableOne').dataTable({
"aoColumnDefs": [{
"bSortable": false,
"aTargets": ["sorting_disabled"]
}],
"bDestroy": true
}).fnDestroy();
});
</script>
$('#example').dataTable();
クラスにして、一度に複数のテーブルをインスタンス化できるようにします
$('.example').dataTable();
最初のものを削除します。
$(document).ready(function() {
$('#example').dataTable();
} );
以下を実行してDataTableをバインドする前に、データテーブルを破棄し、テーブル本体を空にする必要があります。
function Create() {
if ($.fn.DataTable.isDataTable('#dataTable')) {
$('#dataTable').DataTable().destroy();
}
$('#dataTable tbody').empty();
//Here call the Datatable Bind function;}
私の場合、テーブルに適用されたdata-pluginタグによってajax呼び出しが妨害されていました。データプラグインはバックグラウンドの初期化を行い、yourTable.DataTable({...})と同様にこのエラーが発生します。初期化。
から
<table id="myTable" class="table-class" data-plugin="dataTable" data-source="data-source">
に
<table id="myTable" class="table-class" data-source="data-source">