如何销毁的数据表中第一次初始化（DataTable中的一个模式中） [英] How to destroy first initialization of datatable (DataTable inside a modal)
问题描述
我有一个显示表的模式。而我使用的数据表的插件，这样的数据是可搜索和排序。它工作正常，在第一，但是当我关闭模式，点击其他链接到同一个模式，它会显示错误。我已经找到解决方案，以摧毁数据表，我把破坏（）的初始化前的数据表中，但随后没有数据显示在表格内..如果我把它放在后它给了我初始化错误的第二次初始化我按一下按钮。我要怎么解决呢？
这是我的code：
$。阿贾克斯（{
网址：＆LT; PHP的回声SITE_URL（管理员/组/ getMember'）＆gt;有
键入：POST，
数据：{GROUPID：ID}，
数据类型：JSON，
成功：函数（结果）{
$（'＃records_table TBODY）空（）;
// $（'＃records_table）。数据表（{
//bLengthChange：假的，
//分页：假的，
//}）;
$（'模头#hdrmsg。）文本（结果[0] .fname）。
VAR trHTML ='';
$每个（结果，功能（I，项目）{
trHTML + ='＆LT; TR＆GT;＆LT; TD＆GT; + item.fname +'＆LT; / TD＆GT;＆LT; TD＆GT; + item.mname +'＆LT; / TD＆GT;＆LT; TD＆GT; + item.lname +'＆LT; / TD＆GT;＆LT; / TR＆GT;';
}）;
$（'＃records_table TBODY）追加（trHTML）;
$（'＃records_table）。数据表（{
bLengthChange：假的，
分页：假的，
}）;
$（'＃records_table'）数据表（）fnDestroy（）。
}
}）;
如果你想改变初始化选项的主要原因摧毁一个数据表实例 - 样变页面等。或者，如果表结构应该改变。没有这些情况似乎是这里的情况？要回答这个问题，破坏和重新初始化表是使用简写选项破坏最安全的方法：真正的：
无功表= $（'＃records_table）。数据表（{
...
破坏：真
}）;
要走得更远，我认为你正在做一点点倒退。
- 为什么空表与jQuery
$（'＃records_table TBODY）空（）;而不是table.clear（）？ - 为什么要使用jQuery注入记录
$（'＃records_table TBODY）追加（trHTML）;而不是使用table.row.add（ [...]）？
下面是一个类似的问题，模态显示它每次都会reinitialises DataTable中没有冲突，一个code方案：
无功表;
$（'＃模式）。在（'show.bs.modal'，函数（）{
$阿贾克斯（{
网址：网址，
数据类型：JSON，
成功：函数（响应）{
VAR响应= $ .parseJSON（response.contents）;
//清除表，如果它存在
如果（表）table.clear（）;
//重新初始化数据表
表= $（'＃records_table）。数据表（{
破坏：真正的，
bLengthChange：假的，
分页：假的
}）;
$每个（响应函数（I，项目）{
的console.log（插入，项目）;
table.row.add（[
项目名，
item.position
]）。绘制（）;
}）;
}
}）;
}）;
看演示 - > http://jsfiddle.net/bz958dxj/
不过，你真的不需要破坏表的话，那只是减慢性能：
//全局表对象
表= $（'＃records_table）。数据表（{
bLengthChange：假的，
分页：假的
}）;
$（'＃模式）。在（'show.bs.modal'，函数（）{
$阿贾克斯（{
网址：网址，
数据类型：JSON，
成功：函数（响应）{
VAR响应= $ .parseJSON（response.contents）;
//清桌子
table.clear（）;
//插入数据
$每个（响应函数（I，项目）{
的console.log（插入，项目）;
table.row.add（[
项目名，
item.position
]）。绘制（）;
}）;
}
}）;
}）;
演示 - > http://jsfiddle.net/8mjke9ua/
NB ：我刚假设我们正在谈论引导情态动词的基础上，参照 .modal头中的问题。
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中的一个模式中）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
