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

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

这是我的代码：

  $.ajax({ url: "", 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 += '' + item.fname + '' + item.mname + '' + item.lname + ''; }); $('#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();清空表$('#records_table tbody').empty(); 而不是table.clear() ？
• 为什么用jQuery $('#records_table tbody').append(trHTML);注入记录$('#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/

注意 ：我只是assume我们正在讨论bootstrap模式，基于对问题中的.modal-header的引用。

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