我有一个显示表格的模式。我使用数据表插件,以便可以搜索和排序数据。一开始它工作正常,但是当我关闭模态并单击指向同一模态的其他链接时,它显示错误。我找到了销毁 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();
}
});
最佳答案
销毁 dataTables 实例的主要原因是如果您想更改初始化选项 - 例如更改 paging
等。或者是否应该更改表结构。这些情况似乎都不是这里的情况?要回答这个问题,销毁和重新初始化表的最安全方法是使用简写选项 destroy: true
:
var table = $('#records_table').DataTable({
...
destroy : true
});
更进一步,我认为你做的有点倒退。
- 为什么用 jQuery
$('#records_table tbody').empty();
而不是table.clear()
清空表格? - 为什么使用 jQuery
$('#records_table tbody').append(trHTML);
注入(inject)记录而不是使用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/
注意:我只是假设
我们正在讨论引导模态,基于问题中对.modal-header
的引用。
注意²:注意$.parseJSON(response.contents)
,你应该像在问题中那样做。这样做的唯一原因是示例通过代理以避免同源策略。
关于javascript - 如何销毁数据表的第一次初始化(模态内的数据表),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29073255/