无法重新初始化 JQuery DataTable答案

【问题标题】：Cannot reinitialise JQuery DataTable无法重新初始化 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();

脚本放在页面底部。

【问题讨论】：

标签： javascript jquery json jquery-datatables

【解决方案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();

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

【讨论】：