如何销毁数据表的首次初始化(模态内的数据表)
How to destroy first initialization of datatable (DataTable inside a modal)
我有一个显示表格的模态。我使用数据表插件,以便数据可搜索和排序。起初它工作正常,但是当我关闭模态并单击指向同一模态的其他链接时,它会显示错误。我已经找到了销毁数据表的解决方案,我将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);
而不是使用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
我们正在谈论引导模式,基于问题中对.modal-header
的引用。
:注意$.parseJSON(response.contents)
,你应该像在问题中做的那样做。唯一的原因是示例通过代理以避免同源策略。
相关文章:
- 如何通过所选索引(AngularJS)在模态弹出窗口中显示数据
- 将数据传递给由服务创建的Ionic模态
- 包括来自另一个页面的Boostrap模态;t验证表单
- 从模态卸载数据
- 如何销毁数据表的首次初始化(模态内的数据表)
- 数据表和模态
- 使用角度传递的数据更新模态
- 使用 jquery ajax 从 Bootstrap 3 模态表单获取数据
- 为什么数据与模态窗口解除绑定?/AngularJS.
- 使用模态表单时,AngularJS数据表不更新
- JQuery UI模态表单对话框保存数据到数据库
- 在模态表上初始化数据表时出现Ajax错误
- 如何将数据从模态传递到函数
- 将可单击的表行中的数据动态显示到模态中
- Jquery数据表,表不可用后模态窗口
- 流星从链接传递数据到模态
- 创建一个自定义Jquery模态表单来上传数据
- 在AngularJS中,从模态表单中注入数据到父表单中
- 数据表后面的模态显示
- Angularjs 从模态中获取数据并发布在表中