jquery - Datatables警告（テーブルID ='例'）：データテーブルを再初期化できません

Question

datatablesの例を使用していますが、ページの読み込み時に次のようなエラーが発生します：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>

私はこれで何が間違っていますか？

score 170 · Accepted Answer

「bDestroy」を追加してみてください：オプションオブジェクトリテラルにtrue、例：

$('#dataTable').dataTable({
    ...
    ....
    "bDestroy": true
});

ソース：iodocs.com

または最初のものを削除します：

$(document).ready(function() {
    $('#example').dataTable();
} );

あなたの場合は最良のオプションvjkです。

score 65 · Accepted Answer

datatable新しいコードを作成する前に、次のコードを使用して古いコードを破棄することもできますdatatable。

$("#example").dataTable().fnDestroy();

score 41 · Accepted Answer

データテーブルを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>' );
     }
   }
 } );
 } );

score 37 · Accepted Answer

「bDestroy」を追加します：dataTableにtrue次のように：-

   $('#example').dataTable({
    ....
    stateSave: true,
    "bDestroy": true
    });

それが動作します。

score 27 · Accepted Answer

destroy:true構成に追加して、再初期化する前に、すでに存在するデータテーブルが削除されていることを確認できます。

$('#example').dataTable({
    destroy: true,
    ...
});

score 14 · Accepted Answer

以下でこれを行うことにより、DataTableをバインドする前に、データテーブルを破棄してテーブル本体を空にする必要があります。

function Create() {
if ($.fn.DataTable.isDataTable('#dataTable')) {
    $('#dataTable').DataTable().destroy();
}
$('#dataTable tbody').empty();
//Here call the Datatable Bind function;}

score 8 · Accepted Answer

$('#example').dataTable();

一度に複数のテーブルをインスタンス化できるようにクラスにします

$('.example').dataTable();

score 8 · Accepted Answer

この問題は、dataTableを複数回初期化した場合に発生します。その後、前のデータを削除する必要があります。

一方、新しいデータテーブルを作成する前にも、この方法で古いデータテーブルを破棄できます。次のコードを使用します。

$(“#example”).dataTable().fnDestroy();

別のシナリオがあります。たとえば、応答が同じテンプレート内の同じテーブルにアクセスする複数のajaxリクエストを送信すると、エラーも発生します。この場合、どの応答が最初に来るかわからないため、fnDestroyメソッドは正しく機能しません。その後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>

score 2 · Accepted Answer

最初のものを削除します。

$(document).ready(function() {
    $('#example').dataTable();
} );

score 2 · Accepted Answer

https://datatables.net/reference/option/retrieve

$('#example').dataTable({
    retrieve: true,
    ...
});

score 1 · Accepted Answer

私はその古い質問を知っています。この問題は、Datatableを再初期化しようとすると簡単に再現できます。

たとえば、関数のどこかで$('#example').DataTable( { searching: false} );再度呼び出しています。

この問題は簡単に解決できます。手順に従ってください

DataTableメソッドを直接初期化するのではなく、Datatableを変数に初期化します。
1. たとえば、呼び出す代わりに、$('#example').DataTable( { searching: false} );このようにグローバルに（または使用しているjavascriptionのスコープ内で）宣言してみてくださいvar table = $('#example').DataTable( { searching: false } );。
$('#example').DataTable( { searching: false} ); このメソッドを再度呼び出すときはいつでも、呼び出す前に次のアクションを実行してください。
1. if (table != undefined && table != null) { table.destroy(); table = null; }
上記の手順を実行したら、varキーワードを使用せずに同じ変数でテーブルを再初期化してください（すでに定義されているため）。table = $('#example').DataTable( { searching: false } );

JSFiddleコード同じコードの参照用にも添付されていますhttp://jsfiddle.net/vibs2006/qxy4nwfg/

score 1 · Accepted Answer

コードを検索すると、dataTableが2回初期化されている可能性があります。あなたはこのコードのように持っていると思います：

$('#example').dataTable( {paging: false} );

コード内で1回だけ。

score 0 · Accepted Answer

私の場合、ajax呼び出しは、テーブルに適用されたdata-pluginタグによって妨害されていました。データプラグインはバックグラウンドで初期化を行い、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">

score 0 · Accepted Answer

このトピックを検索すると、他の場所で解決策が見つかりましたが、上記と同じ問題があり、「Uncaught TypeError：Undefinedのプロパティ'_DT_CellIndex'を設定できません」というテキストとともに答えを追加しました。原因は、テーブル本体に1つから多数のタグがあることが原因でした。

jquery - Datatables警告（テーブルID ='例'）：データテーブルを再初期化できません

14 に答える 14

Related

Reference