web-dev-qa-db-ja.com

JQuery DataTableを再初期化できません

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

DataTables warning（table 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();

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

javascriptjqueryjsonjquery-datatables
22
panjo

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

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

これは古い質問です。しかし、これは同様の問題を抱えている他の人のためのものです。

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

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

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

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

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

そして、再作成できるように破壊するには：

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

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

11
Mister Smith

最初にしたいことは、データテーブルをきれいにして破壊することです。

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

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

その後、再作成します。

$("#datagrid").dataTable();
3
João

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

1
Edoardo

これは私のために働いたvar table = $（ '＃table1'）。DataTable（{destroy：true、responsive：true、.....}）;

0
erax

新しいDatatables APIには、最初にテーブルを破棄する必要なく、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()の呼び出しに使用できるようにすることです。 。

0
Tim Gautier