jQuery 如何在 Ajax 中重新初始化数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24452270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How To Reinitialize Datatable in Ajax
提问by user3703097
What I Need
我需要的
*When Ajax is loaded datable is reintailized.
*当 Ajax 被加载时，数据会被重新定义。
i would explain in steps
- Here is the output of first step :http://postimg.org/image/c6p8jwp3b/.
- Here is the output of second step :http://postimg.org/image/6fm1z253h/
- Here is the output of third step:http://postimg.org/image/5btny60xf/.
No Reinitialize Of datatable.
I just want paging and search should be reintialized.
i have taken help from this url: http://datatables.net/forums/discussion/256/fnreloadajax/p1.
我会分步骤解释
- 这是第一步的输出：http: //postimg.org/image/c6p8jwp3b/。
- 这是第二步的输出：http: //postimg.org/image/6fm1z253h/
- 这是第三步的输出：http: //postimg.org/image/5btny60xf/。
没有重新初始化数据表。
我只想重新初始化分页和搜索。
我从这个网址得到了帮助：http: //datatables.net/forums/discussion/256/fnreloadajax/p1。
Ajax call code:
Ajax 调用代码：
if ($('#teamTable').size() > 0)
{
$('#teamTable').dataTable({
"sPaginationType": "bootstrap"
});
}
$("#save_team").click(function() {
$.ajax({
type: "POST",
url: "asana_team.php",
data: { people_name: $('#e2').val(), team_name:$('#teamname').val() },
beforeSend : function(){
$("#team_table").remove();
$("#team_table_div").append("<center id=\"loading\" style=\"margin-top:25%;margin-bottom:25%\"><img src='../common/images/ajax-loader.gif' /></center>");
},
contentType: "application/x-www-form-urlencoded"
}).done(function(data) {
$("#loading").remove();
$('#team_table_div').append(data);
$('#teamTable').dataTable({
"sPaginationType": "bootstrap"
});
});
});
* working fine but i reintializing pagination in datatable no datable is loaded.
* 工作正常，但我重新初始化数据表中的分页没有加载数据表。
i have used this code to reinitailize table.
function callBack() { var call= $('#teamTable'); call.dataTable({ "sPaginationType": "bootstrap", "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", "oLanguage": { "sLengthMenu": "_MENU_ records per page" } }); } $(document).ready(function() { callBack(); });
我已使用此代码重新初始化表。
function callBack() { var call= $('#teamTable'); call.dataTable({ "sPaginationType": "bootstrap", "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", "oLanguage": { "sLengthMenu": "_MENU_ records per page" } }); } $(document).ready(function() { callBack(); });
回答by Vicky
Destroy first using
首先使用销毁
$('#teamTable').dataTable().fnDestroy();
Then reinitailize
然后重新初始化
$('#teamTable').dataTable();
回答by Eiiki
This worked for me:
这对我有用：
First I initalize the datatable, with
首先我初始化数据表，
$(".myTable").DataTable({ "bDestroy": true, .... });
The "bDestroy" attribute was necessary in my case.
在我的情况下，“bDestroy”属性是必要的。
Then when I have something to append dynamically to my table I do the following:
然后，当我有一些东西要动态附加到我的表时，我会执行以下操作：
$(".myTable").dataTable().fnDestroy();
//Append stuff to my table
$(".myTable").DataTable({ "bDestroy": true, ... });
Also notice that I use the dataTable()function when destroying the table and the DataTable()function when initalizing it.
另请注意，我dataTable()在销毁表时使用该函数，并DataTable()在初始化时使用该函数。
回答by Omkar Khair
This is what helped me.
这就是帮助我的原因。
$('#teamTable').dataTable().fnDestroy();
$('#teamTable').empty();
.empty()was important as after .fnDestory()the table element still had the data lurking around, which also got carried forward to the reinitialized table.
.empty()很重要，因为在.fnDestory()表元素仍然潜伏着数据之后，这些数据也被带到了重新初始化的表中。
回答by Ravi.Dudi
This worked for me after a lot of research:-First check if dataTable exist or not, if it does then destroy dataTable and recreate it
经过大量研究，这对我有用：-首先检查 dataTable 是否存在，如果存在，则销毁 dataTable 并重新创建它
if ($.fn.DataTable.isDataTable("#mytable")) {
$('#mytable').DataTable().clear().destroy();
}
$("#mytable").dataTable({...
});回答by oman buluatie
Try this:
尝试这个：
$("#table").dataTable({
"destroy": true,
// ...
});
回答by Kanber CIRIT
if ($.fn.DataTable.isDataTable("#t_isteklerim")) {
$("#t_isteklerim").DataTable().clear().draw();
$("#t_isteklerim").dataTable().fnDestroy();
$('#t_isteklerim').empty();
}
var table = $('#t_isteklerim').DataTable({
"bAutoWidth": true,
'dom': 'BRlfrtip',
"columns": [
{'id':'id'},
{'tekliftarihi':'tekliftarihi'},
{'istektarihi':'istektarihi'},
{'istekadedi':'istekadedi'}
],
"language":{"url":"<?=base_url()?>assets/libs/misc/datatables/Turkish.json"},
"order": [[ 0, "desc" ]],
"autoWidth": true,
"ajax": {
url : "<?=base_url()?>tekliflerim/fx_get_items_isteklerim",
type : 'GET'
}
} );
DataTable() and dataTable() are different!
DataTable() 和 dataTable() 是不同的！
回答by Ori Refael
you might need to store dataTable inside a variable to be able to change options or call functions.
您可能需要将 dataTable 存储在变量中才能更改选项或调用函数。
first step : storing table into variable
第一步：将表存储到变量中
var oTable = $('#teamTable').dataTable({
"sPaginationType": "bootstrap"
});
second step : inside your ajax request, when you want to clear the table.
第二步：在您的 ajax 请求中，当您要清除表格时。
if (oTable != undefined) {
oTable.fnClearTable();
}
EDIT
编辑
var oTable;
if ($('#teamTable').size() > 0)
{
var oTable = $('#teamTable').dataTable({
"sPaginationType": "bootstrap" //storing the instance of the dataTable for futher use in the future
});
}
$("#save_team").click(function() {
$.ajax({
type: "POST",
url: "asana_team.php",
data: { people_name: $('#e2').val(), team_name:$('#teamname').val() },
beforeSend : function(){
$("#team_table").hide(); //we dont need to remove table, only hide it..
$("#team_table_div").append("<center id=\"loading\" style=\"margin-top:25%;margin-bottom:25%\"><img src='../common/images/ajax-loader.gif' /></center>");
},
contentType: "application/x-www-form-urlencoded"
}).done(function(data) {
$("#loading").remove();
$('#team_table_div').append(data);
$('#teamTable').show();
//here we clean the data from the table
if (oTable != undefined) {
oTable.fnClearTable();
}
});
});
