无法重新初始化JQuery DataTable

我正在使用jquery数据表来显示网格内的数据。 在初始页面加载脚本采取DateTime.Today并进一步处理它们,问题是在初始页面加载后,当我尝试将用户输入日期用于进一步处理时。 我有以下错误。

DataTables警告(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(); 

它不是最有效的方式,但它有效。 应该可以在不破坏它的情况下更新表,只需使用clearrow.add ,但是当数据源是传递给构造函数的数组时,我还没有找到一种方法。

您要做的第一件事就是清理和销毁您的数据表。

 var tables = $.fn.dataTable.fnTables(true); $(tables).each(function () { $(this).dataTable().fnClearTable(); $(this).dataTable().fnDestroy(); }); 

然后重新创建。

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

检查代码中是否存在对数据表的重复调用。 如果您不小心多次初始化表,则会返回此错误

新的Datatables API具有重新加载function,可以再次从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()

清除现有的dataTable:

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

绝对是我正在寻找的.Nice解决方案来重新数据表