无法重新初始化 JQuery DataTable

Posted 2023-05-07

【中文标题】无法重新初始化 JQuery DataTable

【英文标题】：Cannot reinitialise JQuery DataTable

【发布时间】：2012-09-09 08:52:57

【问题描述】：

我正在使用 jquery 数据表在网格内显示数据。在初始化页面加载脚本上使用 DateTime.Today 并进一步处理它们，问题是在初始化页面加载之后，当我试图让用户输入日期以进行进一步处理时。我有以下错误。

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();

脚本放在页面底部。

【参考方案1】：

尝试将 "bDestroy": true 添加到选项对象字面量，例如

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

【讨论】：

谢谢，但添加了“bDestroy”：真正的错误消息消失了，但我没有得到日期值，所以错误也随着日期值消失了。所以，问题依然存在。

只使用 bDestroy 对我来说效果很好：true

新数据将被添加到旧数据中，然后您将获得两个数据的表格

感谢您的解决方案，仅使用 bDestroy:true 就对我有用

在较新版本的数据表中，bDestroy 选项已重命名为 destroy (datatables.net/reference/option/destroy)，但 bDestroy 仍然有效。

【参考方案2】：

我知道这是一个老问题。但这适用于其他有类似问题的人。

您应该销毁旧的 dataTable 分配。 在创建新数据表之前使用以下代码

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

【讨论】：

你能具体点吗？当 dataTable 未初始化并且我们尝试销毁它时，它对我不起作用。为了解决它，我将它包装在 try catch 块中。

我的错，它起作用了，我没有在销毁后清空（）我的表内容，所以不知何故，数据一直在加起来

【参考方案3】：

DataTables API 已更改，但如果您再次尝试重新初始化数据表，仍会抛出此错误。

您可以检查它是否已经创建：

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

并销毁它以便重新创建它：

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

这不是最有效的方法，但它确实有效。应该可以在不首先破坏表的情况下更新表，只需使用clear 和row.add，但是当数据源是传递给构造函数的数组时，我还没有找到这样做的方法。

【讨论】：

我们现在是否应该在任何地方使用大写的D 字母sitck 到DataTable？

使用新的 API 这应该被投票到顶部作为接受的答案

@andi -- 大写“D”是一个错误

re: 大写D，以为这是个错误，其实不是：datatables.net/new/1.10

【参考方案4】：

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

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

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

然后重新创建。

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

【参考方案5】：

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

【参考方案6】：

新的 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()。

【参考方案7】：

这对我有用 var table = $('#table1').DataTable( 摧毁：真的， 响应式：真实， ...... );

【参考方案8】：

清除已有的dataTable：

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

【参考方案9】：

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

这绝对是我要找的。重新初始化数据表的好解决方案