无法重新初始化 DataTable - 数据表的动态数据答案

【问题标题】：Cannot reinitialise DataTable - dynamic data for datatable无法重新初始化 DataTable - 数据表的动态数据
【发布时间】：2014-08-24 02:39:07
【问题描述】：

我有一个显示所有员工的数据表。 document.ready 上的所有员工都可以正常工作。我有一个选择标签，其中包含 'project_manager' & 'team_leader' 之类的员工类型，并且在更改员工类型时，我正在调用函数 get_employees(emp_type) 并传递所选的员工类型。

在 ajax 响应中获得了所需且正确的数据，但会发出警告

DataTables warning: table id=example - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

我试图摧毁它，但没有成功。

也试过

$('#example').dataTable().fnClearTable();
$('#example').dataTable().fnDestroy();

清表并显示新添加的数据，但每次都添加带有列名的新排序图像。

这是我的代码 sn-p。

$(document).ready(function() {
            get_employees('all');
        });

        function get_employees(emp_type)
        {
            $.ajax({
                url: '../ajax_request.php',
                type: "POST",
                data: {
                    action: "admin_get_all_employees",
                    type: emp_type
                },
                success: function(response) {
                    var response = jQuery.parseJSON(response);

                    // $('#example').destroy(); tried this but haven’t worked

                    $('#example').dataTable({
                        "aaData": response.data,
                    });
                }
            });
        }

提前致谢。

【问题讨论】：

标签： jquery ajax dynamic datatable destroy

【解决方案1】：

在当前版本的 DataTables (1.10.4) 中，您可以简单地将 destroy:true 添加到配置中，以确保在重新初始化之前删除任何已经存在的表。

$('#example').dataTable({
    destroy: true,
    aaData: response.data
});

【讨论】：

这个答案是最好的！正如 Coin_op 所说：只需添加“destroy: true,”
我使用了 clear() 但没有用。这肯定是最好的答案。

【解决方案2】：

数据表中的This tech note 部分解释了此警告的原因。来自那里的相关信息：

通过将选项传递给 DataTables 会触发此错误选定节点的 DataTable 实例时的构造函数对象已经初始化了。例如：
$('#example').dataTable( {
    paging: false
} );


$('#example').dataTable( {
    searching: false
} );

上述文档解释了两种处理方法。

Retrieve：它解释了如何在初始化后应用附加选项（即使之前没有初始化也可以），方法是将 retrieve 设置为 true，如下所示：李>

table = $('#example').DataTable( {
    retrieve: true,
    paging: false
} );

销毁：在这种情况下，您可以通过调用table.destroy(); 显式销毁对象，然后再次创建表。或者您可以像接受的答案中提到的那样简单地传递destroy: true 选项。
```
table = $('#example').DataTable( {
    paging: false
} );

table.destroy();

table = $('#example').DataTable( {
    searching: false
} );
```

使用 destroy:true 选项：

$('#example').DataTable( {
    destroy: true,
    searching: false } );

注意：如果您包含多次创建数据表的 javascript 文件，也可能会发生此错误。我使用的是 apache 切片并将其包含在基本定义和扩展定义中，这也导致了此错误。

【讨论】：

【解决方案3】：

这对我有帮助：

var table = $('#example').DataTable( {
    // Clear previous data
    destroy: true,
    // Load new data with AJAX from data.json file.
    ajax: "data.json" 
} );

【讨论】：

【解决方案4】：

试试下面的方法

    var $table=$('#example').dataTable({
                    "aaData": response.data,
                });


    $table.fnDestroy();

【讨论】：

【解决方案5】：

只有当您知道实例时，所有其他答案才有效。如果您不知道 js 文件在哪里包含将数据表应用到您的 html 表的 js 代码，那么您不知道数据表实例，那么所有其他答案都不适用于您。

最好的方法是从你的 html 表中删除数据表类。例如：

<table class="datatable" id="maintable"></table>

然后通过jquery手动初始化apply datatable到你的表：

$(document).ready(function () { 
    $('#maintable').dataTable({
        //put all your datatable config and setting and filter here.
    });
})

【讨论】：