如何销毁数据表的第一次初始化（模态内的数据表）

Question

我有一个显示 table 的模式。我使用 datatable 插件，以便可以搜索和排序数据 table。一开始它工作正常，但是当我关闭模态并单击其他 link 到相同的模态时，它显示错误。我找到了销毁 DataTable 的解决方案，我将 destroy() 放在数据 table 初始化之前，但是 table 中没有显示任何数据。如果我在初始化之后放置它第二次单击按钮时，它给了我初始化错误。我该如何解决这个问题？

这是我的代码：

    $.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 等。或者是否应该更改 table 结构。 None 那些情况好像是这里的情况？要回答这个问题，销毁和重新初始化 table 的最安全方法是使用 shorthand 选项 destroy: true ：

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

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

为什么用 jQuery $('#records_table tbody').empty(); 而不是 table.clear() 清空 table？
为什么要使用 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();
         });
       }
    });
});

查看演示 -> http://jsfiddle.net/bz958dxj/

但你根本不需要破坏 table，它只会降低性能:

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

演示 -> http://jsfiddle.net/8mjke9ua/

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

注意²：注意$.parseJSON(response.contents)，你应该按照你在问题中所做的那样去做。这样做的唯一原因是示例通过代理以避免同源策略。

如何销毁数据表的第一次初始化（模态内的数据表）

How to destroy first initialization of datatable (DataTable inside a modal)

javascript

ajax

jquery

jquery-datatables