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

Posted 2023-05-07

【中文标题】如何销毁数据表的第一次初始化（模式内的数据表）

【英文标题】：How to destroy first initialization of datatable (DataTable inside a modal)

【发布时间】：2015-05-18 08:33:28

【问题描述】：

我有一个显示表格的模式。我使用数据表插件，以便数据是可搜索和可排序的。一开始它可以正常工作，但是当我关闭模态并单击指向同一模态的其他链接时，它会显示错误。我找到了销毁 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();

      

  );

【问题讨论】：

关闭模态时使用destroy()怎么样？

@CorwinCZ，我将把代码放在哪里？如何？我已经尝试过$('#viewMember').on('hidden.bs.modal', function (event) $('.modal-body #records_table').DataTable().fnDestroy(); );，但仍然出现同样的问题。它没有破坏数据表。

@CorwinCZ，以及当我在hide 上尝试模态时，模态现在无法关闭..

@d_unknown - 已将数据表标签替换为 jquery-datatables 标签。 datatable 标记最初是一个 .NET 标记，现在模棱两可/过时 - jQuery dataTables 由（曾经）由 datatables 标记标识，现在是 jquery-datatables 或 datatables-1.10 标记。

【参考方案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();
         );
       
    );
);       

查看演示 -> 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();
         );
       
    );
);   

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

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

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

【讨论】：

感谢先生，这是一个很大的帮助。先生，我没有想到这就是为什么我只是清空表格并附加行，就像普通 html 表格中的内容一样。现在，我明白先生.. :)