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();
ページの下部にスクリプトが配置されます。
「bDestroy」:trueをオプションオブジェクトリテラルに追加してみてください。
$('#dataTable').dataTable({
"bServerSide": true,
....
"bDestroy": true
});
これは古い質問です。しかし、これは同様の問題を抱えている他の人のためのものです。
古いdataTable割り当てを破棄する必要があります。新しいデータテーブルを作成する前に、次のコードを使用します
$("#dataTable").dataTable().fnDestroy();
DataTables APIは変更されましたが、データテーブルを再度初期化しようとすると、このエラーが引き続きスローされます。
すでに作成されているかどうかは、次のコマンドで確認できます。
$.fn.DataTable.isDataTable("#myTable")
そして、再作成できるように破壊するには:
$('#myTable').DataTable().clear().destroy();
これは最も効率的な方法ではありませんが、機能します。 clear
とrow.add
を使用するだけで、最初にテーブルを破棄せずにテーブルを更新できるはずですが、データソースがコンストラクタに渡された配列である場合、その方法は見つかりませんでした。
最初にしたいことは、データテーブルをきれいにして破壊することです。
var tables = $.fn.dataTable.fnTables(true);
$(tables).each(function () {
$(this).dataTable().fnClearTable();
$(this).dataTable().fnDestroy();
});
その後、再作成します。
$("#datagrid").dataTable();
コードにデータテーブルへの重複した呼び出しがあるかどうかを確認してください。誤ってテーブルを複数回初期化すると、まさにこのエラーが返されます
これは私のために働いたvar table = $( '#table1')。DataTable({destroy:true、responsive:true、.....});
新しい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()
の呼び出しに使用できるようにすることです。 。