无法重新初始化JQuery DataTable。

Question

我正在使用jQuery DataTables将数据显示在网格中。 在初始页面加载脚本时，它获取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();

脚本被放置在页面底部。

- panjo

Answer 1

尝试将"bDestroy": true添加到选项对象文字中，例如。

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

- user1565195

---

谢谢，但是加上"bDestroy": true后错误信息消失了，但我仍然没有得到日期值，所以问题依旧存在。 - panjo

对我来说很好用，只需使用bDestroy: true。 - netwire

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

谢谢您的解决方案，它对我很有用，只需使用bDestroy:true。 - Neha Ghetia

在较新版本的datatables中，bDestroy选项已被重命名为destroy（https://datatables.net/reference/option/destroy），但是`bDestroy`仍然可以使用。 - AJPerez

Answer 2

我知道这是一个老问题。但这是为了任何其他遇到类似问题的人。

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

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

- Nis

---

请问您能具体点吗？当 dataTable 未初始化且我们尝试销毁它时，它对我不起作用。为了解决这个问题，我将其包装在try catch块中。 - Nis

我的错，它起作用了，我在销毁后没有清空表格内容，所以数据继续累加。 - ah-shiang han

Answer 3

DataTable的API已经改变，但如果你尝试重新初始化datatable，仍会抛出此错误。

您可以使用以下方法检查它是否已创建：

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

并摧毁它，以便可以重新创建：

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

虽然这不是最有效的方法，但它能够工作。应该可以在不首先销毁表格的情况下通过使用clear和row.add来更新表格，但当数据源是传递给构造函数的数组时，我还没有找到一种可以实现这样做的方法。

- Mister Smith

---

我们现在是否应该在所有地方坚持使用大写字母D的DataTable？ - andilabs

有了新的API，这个答案应该被投票到顶部并接受。 - Matthew Colley

@andi -- 大写的'D'是一个错误。 - jbd

关于大写字母D的问题，我以为这是一个错误，但实际上不是：https://datatables.net/new/1.10 - jbd

Answer 4

首先，您需要清除和销毁数据表。

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

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

然后重新创建。

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

- João

Answer 5

检查您的代码中是否存在对数据表的重复调用。如果意外地多次初始化表格，则会返回此错误。

- Edoardo

Answer 6

这对我有用 var table = $（'#table1'）.DataTable（{ destroy：true， responsive：true， ..... }）;

- erax

Answer 7

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

- Tim Gautier

Answer 8

清空现有的数据表：

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

- rameshkts

Answer 9

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

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

- Tirupati