javascript - JQueryDataTableを再初期化できません

Question

グリッド内のデータを表示するためにjqueryデータテーブルを使用しています。initページロードスクリプトでDateTime.Todayを取り、それらをさらに処理します。問題は、initページロード後、ユーザーが入力した日付をさらに処理しようとしているときに発生します。次のエラーが発生しました。

DataTables警告（テーブルID ='dataTable'）：DataTableを再初期化できません。このテーブルのDataTablesオブジェクトを取得するには、引数を渡さないか、bRetrieveとbDestroyのドキュメントを参照してください

function getDate() {
    var date = $('input[name="myDate"]').val();
    return date;
}

$('#myDate').click(updateDate);

function updateDate() { 
    $('#dataTable').dataTable({
        "bServerSide": true,
        "sAjaxSource": "/Home/Ajax",
        "fnServerParams": function (aoData) {
            var date = getDate();
            aoData.push({ "name": "myDate", "value": date });
        },
        //... there's more
}

updateDate();

スクリプトはページの下部に配置されます。

score 57 · Accepted Answer

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

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

score 13 · Accepted Answer

私はこれが古い質問であることを知っています。しかし、これは同様の問題を抱えている他の人のためのものです。

古いdataTableの割り当てを破棄する必要があります。新しいデータテーブルを作成する前に、次のコードを使用してください

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

score 12 · Accepted Answer

DataTables APIが変更されましたが、データテーブルを再初期化しようとすると、このエラーがスローされます。

次のコマンドですでに作成されているかどうかを確認できます。

$.fn.DataTable.isDataTable("#myTable")

そして、それを破壊して、再び再作成できるようにします。

$('#myTable').DataTable().clear().destroy();

これは最も効率的な方法ではありませんが、機能します。clearとを使用するだけで、最初にテーブルを破棄せずにテーブルを更新できるはずですがrow.add、データソースがコンストラクターに渡される配列である場合、それを行う方法が見つかりませんでした。

score 3 · Accepted Answer

最初にやりたいことは、データテーブルをクリーンアップして破棄することです。

var tables = $.fn.dataTable.fnTables(true);

$(tables).each(function () {
  $(this).dataTable().fnClearTable();
  $(this).dataTable().fnDestroy();
});

その後、再作成します。

$("#datagrid").dataTable();

score 1 · Accepted Answer

コード内にデータテーブルへの重複した呼び出しがあるかどうかを確認してください。誤ってテーブルを複数回初期化すると、まさにこのエラーが返されます

score 0 · Accepted Answer

新しいDatatablesAPIには、最初にテーブルを破棄しなくてもajaxソースからデータを再度取得するリロード関数があります。多数の行（5000以上）のテーブルがある場合、破棄には初期ロードよりも時間がかかります。さらに、破棄時に「処理」ボックスは表示されませんが、リロードは非常に高速で、「処理中」が正しく表示されます。「動作中のボックス。

これは、新しいAPIを使用して目的の効果を実現する質問のコードの更新バージョンです。

function getDate() {
  var date = $('input[name="myDate"]').val();
  return date;
}

$('#myDate').click(updateDate);

// Use .DataTable instead of .dataTable
// It returns a different object that has the ajax attribute on it.
var myDataTable = $('#dataTable').DataTable({
  "bServerSide": true,
  "sAjaxSource": "/Home/Ajax",
  "fnServerParams": function (aoData) {
    var date = getDate();
    aoData.push({ "name": "myDate", "value": date });
  },
  //... there's more

function updateDate() { 
  myDataTable.ajax.reload();
}

私が行った唯一の変更は、.DataTableの代わりにを使用.dataTableし、戻り値への参照を維持して、myDataTableを呼び出すために使用できるようにすること.ajax.reload()です。

score 0 · Accepted Answer

これは私にとってはうまくいきましたvartable= $（'＃table1'）。DataTable（{destroy：true、response：true、.....}）;

score -1 · Accepted Answer

既存のdataTableをクリアします。

$(this).dataTable().fnClearTable();
$(this).dataTable().fnDestroy();

score -2 · Accepted Answer

var myDataTable = $('#dataTable').DataTable();
myDataTable.ajax.reload();

絶対にこれが私が探しているものです。datatテーブルを再初期化するための素晴らしいソリューション

javascript - JQueryDataTableを再初期化できません

9 に答える 9

Related

Reference