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

Cannot reinitialise DataTable - dynamic data for datatable

提问by Pramod

I have a datatable showing all employees. It is working fine for all employees on document.ready. I have a select tag containing the type of employees like 'project_manager' & 'team_leader', and on change of employee type I am calling a function get_employees(emp_type)and passing the selected employee type.

我有一个显示所有员工的数据表。它对 上的所有员工都运行良好document.ready。我有一个包含员工类型的 select 标签，例如'project_manager' & 'team_leader'，并且在更改员工类型时，我正在调用一个函数get_employees(emp_type)并传递选定的员工类型。

It is getting desired and proper data in ajax response, but throwing warning

它正在 ajax 响应中获得所需和正确的数据，但抛出警告

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

I tried to destroy it, but no luck.

我试图摧毁它，但没有运气。

also tried for

也尝试过

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

it is clearing table and showing newly appended data, but adding new sort images with column name every time.

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

Here is my code snippet.

这是我的代码片段。

$(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,
                    });
                }
            });
        }

Thanks in advance.

提前致谢。

回答by Coin_op

In the current version of DataTables (1.10.4) you can simply add destroy:trueto the configuration to make sure any table already present is removed before being re-initialised.

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

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

回答by user3885927

This tech notesection from datatables explains the reason for this warning. Relevant information from there:

数据表中的此技术说明部分解释了此警告的原因。那里的相关资料：

This error is triggered by passing in options to a DataTables constructor object when the DataTable instance for the selected node has already been initialised. For example:

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


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

当所选节点的 DataTable 实例已经初始化时，通过将选项传递给 DataTables 构造函数对象会触发此错误。例如：

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


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

The above documentation explains two ways to deal with this.

上面的文档解释了解决这个问题的两种方法。

1. Retrieve: It explains how to apply additional options after the initialization (works even if it is not initialized before) by using setting retrieveto trueas follows:

1. Retrieve：它解释了如何在初始化后应用其他选项（即使之前没有初始化也能工作），方法是将retrieve设置为true，如下所示：

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

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

1. Destroy: In this case you can destroy the object explicitly by calling table.destroy();and then creating the table again. Or you can simply pass destroy: trueoption as mentioned in the accepted answer.

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

2. 销毁：在这种情况下，您可以通过调用table.destroy();然后再次创建表来显式销毁对象。或者您可以简单地传递destroy: true已接受答案中提到的选项。

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

Using destroy:true option:

使用 destroy:true 选项：

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

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

Note: This error may also occur if you include your javascript file that creates the dataTable multiple times. I was using apache tiles and included it in base as well as extended definition which also resulted in this error.

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

回答by Nole

This helped me:

这帮助了我：

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

回答by Vicky

Try something like below

尝试像下面这样

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


    $table.fnDestroy();