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

时间:2014-07-03 05:44:37

标签: jquery ajax dynamic datatable destroy

我有一个显示所有员工的数据表。 它适用于document.ready的所有员工。 我有一个包含'project_manager' & 'team_leader'等员工类型的select标签,在更改员工类型时,我调用了一个函数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();

它是清除表并显示新附加的数据,但每次都添加具有列名的新排序图像。

这是我的代码段。

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

提前致谢。

4 个答案:

答案 0 :(得分:55)

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

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

答案 1 :(得分:3)

来自数据表的

This tech note部分解释了此警告的原因。来自那里的相关信息:

  

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

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


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

上述文档解释了处理此问题的两种方法。

  1. 检索:它解释了如何在初始化后应用其他选项(即使之前未初始化也可以工作),方法是将检索设置为 true ,如下所示:
  2. table = $('#example').DataTable( {
        retrieve: true,
        paging: false
    } );
    
    1. 销毁:在这种情况下,您可以通过调用table.destroy();然后再次创建表来显式销毁对象。或者您可以简单地传递接受答案中提到的destroy: true选项。

      table = $('#example').DataTable( {
          paging: false
      } );
      
      table.destroy();
      
      table = $('#example').DataTable( {
          searching: false
      } );
      
    2. 使用destroy:true选项:

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

      注意:如果您包含多次创建dataTable的javascript文件,也可能会出现此错误。我正在使用apache磁贴并将其包含在base和扩展定义中,这也导致了这个错误。

答案 2 :(得分:1)

尝试以下内容

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


    $table.fnDestroy();

答案 3 :(得分:1)

这对我有帮助:

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