如何破坏datatable（DataTable里面一个模态）的第一次初始化 [英] 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实例的主要原因是如果要更改初始化选项，如更改分页等等。或者如果表结构应该改变。这些情况似乎都不是这样的情况？要解决这个问题，销毁和重新初始化表格的最安全的方法是使用速记选项 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）;
//清除表，如果它存在
if（table）table.clear（）;
//重新初始化dataTable
table = $（'＃records_table'）DataTable（{
destroy：true，
bLengthChange：false，
paging：false
}）;
$ .each（response，function（i，item）{
console.log（ insert，item）;
table.row.add（[
item.name，
item.position
]）。draw（）;
}） ;
}
}）;
}）;
请参阅demo - > http://jsfiddle.net/bz958dxj/
但是你真的不需要摧毁表总之，它只是降低了性能：
//全局表对象
表= $（'＃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）;
//清除表
table.clear（）;
//插入数据
$ .each（response，function（i，item）{
console.log（insert，item） ;
table.row.add（[
item.name，
item.position
]）。draw（）;
}）;
}
}）;
}）;
演示 - > http://jsfiddle.net/8mjke9ua/
NB ：我根据 .modal-header 的引用，我们正在谈论引导模态， p>
NB ²：请注意 $。parseJSON（response.contents），你应该正如你在这个问题上所做的那样。唯一的原因是这些例子是通过代理来避免同源政策。
I have a modal that displays a table. And I use datatable plugin so that the data is searchable and sortable. It works properly at first but when I close the modal and click other link to the same modal, it displays error. I have found solution to destroy the DataTable and I put the destroy() before the initialization of the datatable but then no data is displayed inside the table.. if I put it after the initialization it gave me the initialization error the second time I click the button. How am I going to solve this?
here's my code:
$.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();
}
});
The main reason for destroying a dataTables instance is if you want to change the initialisation options - like change paging and so on. Or if the table structure should be altered. None of those circumstances seems to be the case here? To answer the question, the safest way to destroy and reinitialise a table is to use the shorthand option destroy: true :
var table = $('#records_table').DataTable({
...
destroy : true
});
To go further, I think you are doing it a little backwards.
- Why empty the table with jQuery
$('#records_table tbody').empty();instead oftable.clear()? - Why inject records with jQuery
$('#records_table tbody').append(trHTML);instead of usingtable.row.add([...])?
Here is a code scenario similar to the one in the question, which reinitialises the dataTable without conflicts, each time the modal is shown :
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();
});
}
});
});
see demo -> http://jsfiddle.net/bz958dxj/
But you really dont need to destroy the table at all, it just slows down performance :
//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();
});
}
});
});
demo -> http://jsfiddle.net/8mjke9ua/
NB: I just assume we are talking about bootstrap modals, based on the reference to .modal-header in the question.
NB²: Notice the $.parseJSON(response.contents), you should do it as you are doing it in the question. The only reason for this is that the examples go trough a proxy to avoid the same-origin policy.
这篇关于如何破坏datatable（DataTable里面一个模态）的第一次初始化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
