Question

我有一个显示表格的模态。我使用datatable插件，以便数据可搜索和排序。它首先正常工作但当我关闭模态并单击其他链接到同一模态时，它会显示错误。我找到了销毁DataTable的解决方案，我在数据表初始化之前放了destroy()，但是表中没有显示数据..如果我在初始化之后把它放到第二次给我初始化错误我点击按钮。我怎么解决这个问题？

这是我的代码：

    $.ajax({
      url: "<?php echo site_url('admin/group/getMember')?>",
      type: 'POST',
      data: { 'groupID': id},
      dataType: 'JSON',
      success: function(result){
        $('#records_table tbody').empty();
        // $('#records_table').DataTable({
            // "bLengthChange": false,
            // "paging":false,
        // });
        $('.modal-header #hdrmsg').text(result[0].fname);
        var trHTML='';

         $.each(result, function (i, item) {
            trHTML += '<tr><td>' + item.fname + '</td><td>' + item.mname + '</td><td>' + item.lname + '</td></tr>';
        });
        $('#records_table tbody').append(trHTML);
        $('#records_table').DataTable({
            "bLengthChange": false,
            "paging":false,
        });
        $('#records_table').DataTable().fnDestroy();

      }

  });

Answer 1

销毁dataTables实例的主要原因是您要更改初始化选项 - 例如更改paging等。或者如果表结构应该改变。这些情况似乎都不是这种情况吗？要回答这个问题，销毁和重新初始化表格的最安全方法是使用速记选项destroy: true：

var table = $('#records_table').DataTable({
   ...
   destroy : true
});

为了更进一步，我认为你做得有点倒退了。

为什么要使用jQuery $('#records_table tbody').empty();而不是table.clear()清空表？
为什么要使用jQuery $('#records_table tbody').append(trHTML);而不是table.row.add([...])？

这是一个类似于问题中的代码场景，每次显示模态时都会重新初始化dataTable而不会发生冲突：

var table;
$('#modal').on('show.bs.modal', function() {
   $.ajax({
      url: url,
      dataType: 'JSON',
      success: function(response) {
         var response = $.parseJSON(response.contents);

         //clear the table, if it exists
         if (table) table.clear();

         //reinitialise the dataTable   
         table = $('#records_table').DataTable({
           destroy: true,
           bLengthChange: false,
           paging: false
         });

         $.each(response, function(i, item) {
           console.log("inserting", item);
           table.row.add([
             item.name,
             item.position
           ]).draw();
         });
       }
    });
});

参见演示 - ＆gt;的 http://jsfiddle.net/bz958dxj/

但你根本不需要破坏桌面，只会降低性能：

//global table object table = $('#records_table').DataTable({ bLengthChange: false, paging: false }); $('#modal').on('show.bs.modal', function() { $.ajax({ url: url, dataType: 'JSON', success: function(response) { var response = $.parseJSON(response.contents); //clear the table table.clear(); //insert data $.each(response, function(i, item) { console.log("inserting", item); table.row.add([ item.name, item.position ]).draw(); }); } }); });

演示 - ＆gt;的 http://jsfiddle.net/8mjke9ua/

NB ：我只是assume我们正在谈论自助模式，基于问题中对.modal-header的引用。

NB ²：注意$.parseJSON(response.contents)，您应该在问题中这样做。唯一的原因是这些例子通过代理来避免同源政策。

如何破坏数据表的第一次初始化（模态内的DataTable）

1 个答案: