Javascript 无法重新初始化 JQuery 数据表

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12454190/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 07:59:29  来源:igfitidea点击:

Cannot reinitialise JQuery DataTable

javascriptjqueryjsonjquery-datatables

提问by panjo

I'm using jquery datatables to display data inside grid. On init page load script take DateTime.Today and process them further, problem is after init page load, when I'm trying to take users input date for further process. I'm having following error.

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

DataTables warning (table id = 'dataTable'): Cannot reinitialise DataTable. To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy

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

Script is put on the bottom of the page.

脚本放在页面底部。

回答by user1565195

Try adding "bDestroy": true to the options object literal, e.g.

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

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

回答by Nis

I know this is an OLD question. But this is for anyone else having similar issue.

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

You should destroy the old dataTable assignment. Before creating the new datatable use the following code

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

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

回答by Mister Smith

The DataTables API has changed, but this error is still thrown if you try to reinitialize the datatable again.

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

You can check if it is already created with:

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

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

And to destroy it so that it can be recreated again:

并销毁它以便它可以重新创建:

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

It is not the most efficient way, but it works. It should be possible to update the table without destroying it first, just using clearand row.add, but I haven't found a way of doing that when the data source is an array passed to the constructor.

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

回答by Jo?o

The first thing you wanna do is to clean and destroy your datatables.

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

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

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

and then re-create.

然后重新创建。

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

回答by Edoardo

check if in your code there is a duplicated call to the datatable. If you accidentally initialize your table more than once, it returns exactly this error

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

回答by Tim Gautier

The new Datatables API has a reload function that will get the data from the ajax source again without requiring you to destroy the table first. When I have a table with a large number of rows (5000+) the destroy takes longer than the initial load, plus the "processing" box doesn't show up when destroying, but a reload is quite fast and correctly shows the "processing" box when it's working.

新的 Datatables API 具有重新加载功能,该功能将再次从 ajax 源获取数据,而无需您先销毁表。当我有一个包含大量行 (5000+) 的表时,销毁时间比初始加载时间长,而且销毁时不显示“处理”框,但重新加载非常快并且正确显示“处理” " 工作时的盒子。

Here is an updated version of the code in the question that uses the new API to achieve the desired effect:

这是问题中代码的更新版本,它使用新的 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();
}

The only change I've made is to use .DataTableinstead of .dataTableand to maintain a reference to the return value myDataTableso that it can be used to call .ajax.reload().

我所做的唯一更改是使用.DataTable而不是.dataTable并维护对返回值的引用,myDataTable以便它可以用于调用.ajax.reload().

回答by erax

This worked for me var table = $('#table1').DataTable({ destroy: true, responsive: true, ..... });

这对我有用 var table = $('#table1').DataTable({ destroy: true,responsive: true, ..... });

回答by rameshkts

Clear the existing dataTable:

清除现有数据表:

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

回答by Tirupati

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

Absolutely this is what I am looking for.Nice solution to reintialise datat table

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