[英]datatables ajax reload from new source
How do I reload datatables with the new ajax functionality? 如何使用新的ajax功能重新加载数据表?
I think it's a problem of scope. 我认为这是一个范围问题。
function load_table(tableName,src)
{
var oTable = $('#'+tableName).DataTable({
'bProcessing' : true,
'bServerSide' : true,
'responsive' : true,
'sAjaxSource' : src,
'fnServerData' : function(sSource, aoData, fnCallback)
{
$.ajax({
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : aoData,
'success' : fnCallback
});
},
});
}
Try to reload it from a different data source: 尝试从其他数据源重新加载它:
$("input[type="button"]").on('click',function()
{
oTable.ajax.url( 'newsource' ).load();
alert( 'Data source: '+oTable.ajax.url() );
});
Alert outputs : src : newsource 警报输出:src:newsource
Browser loads table from src: oldsource 浏览器从src:oldsource加载表
I've had the same issue to anyone who runs into this problem in the future here is the solution: 对于今后遇到这个问题的人来说,我遇到了同样的问题,这就是解决方案:
To accomplish reloading of data from a different source: 要完成从不同来源重新加载数据:
refer to the DOM table element NOT the DataTable object or you will get a reinitilization error: 引用DOM表元素而不是 DataTable对象,否则会出现重新启动错误:
step 1: clear data : 第1步:清除数据:
$('#your_table_name').DataTable().clear();
step 2: Destroy the DataTable object 第2步:销毁DataTable对象
$('#your_table_name').DataTable().destroy();
if you're using child rows this is very important remove the click listener 如果您正在使用子行,则删除单击侦听器非常重要
$( "#your_table_name tbody" )
.off( "click", "td.details-control");
Reinit DataTables: 重新启动DataTables:
loadTable('newsource','your_table_name')
and your loadTable function 和你的loadTable函数
function loadTable(src,tableName)
{
var oTable = $('#'+tableName).DataTable({
'bProcessing' : true,
'bServerSide' : true,
'responsive' : true,
"sDom": '<"toolbar"lfr>tip<"F">R',
'sAjaxSource' : src,
});
//initchildrows()
}
Yes, this seems to be a scope problem. 是的,这似乎是一个范围问题。 You assign the dataTables instance to a local variable :
您将dataTables实例分配给局部变量:
function load_table(tableName,src)
{
var oTable = $('#'+tableName).DataTable({
'bProcessing' : true,
...
assign it to a global variable instead : 将其分配给全局变量:
var oTable;
function load_table(tableName,src)
{
oTable = $('#'+tableName).DataTable({
'bProcessing' : true,
...
If it still not works - but it should, you are using oTable.ajax.url(<src>).load()
just right - then simply reinitialise the table with the destroy : true
option : 如果它仍然不起作用 - 但它应该,你正在使用
oTable.ajax.url(<src>).load()
恰到好处 - 然后只需使用destroy : true
选项重新初始化表:
var oTable;
function load_table(tableName,src)
{
oTable = $('#'+tableName).DataTable({
destroy : true,
'bProcessing' : true,
...
and call load_table
from the event : 并从事件中调用
load_table
:
$("input[type='button']").on('click',function()
{
load_table('tableName', 'newsource');
});
Thanks,Here is my solution,it is not perfect,must send twice url,thanks to this author: How do I modify ajax url of a query datatable? 谢谢,这是我的解决方案,它不完美,必须发送两次url,感谢这位作者:如何修改查询数据表的ajax url? eg: if you If you initialize datatable like this:
例如:if if如果你像这样初始化数据表:
var datatables_options = {
"aLengthMenu" : [ [ 5, 10, 50, 100,500, -1 ],[ 5, 10, 50, 100,500, "All" ] ],
"iDisplayLength" : 5,
"sDom": 'T<"clear">rt<"float_left"i><"float_right_nexpage"p><"float_right_display"l>',
<'float_right_nexpage'p> <'float_right_display'l>>",
"bSort" : false,
"bProcessing" : false,
"bServerSide" : true,
"bStateSave" : true,
"bDestroy" : true,
"bDeferRender":true,
"bJQueryUI" : false,
"sScrollX" : "100%",
"bStateSave":true,
"language" : oLanguageData,
"aoColumns" : aoColumnsData,
"fnDrawCallback" : function() {
//Checkbox status updates
$("#uniform-check-all").removeClass("checker");
$("span").removeClass("checked");
$("span #check-all").attr("checked",false);
$.uniform.update();
},
"fnRowCallback" : function(nRow, aData,
iDataIndex) {
},
"sAjaxSource" : "wageQuery.action?wageDate="
+ date,
"fnServerData" : function(sSource, aoData,
fnCallback) {
$.ajax({
"type" : 'post',
"async":false,
"url" : sSource,
"dataType" : "json",
"data" : aoData,
"success" : function(resp) {
fnCallback(resp);
}
});
},
"fixedColumns": {
"iLeftColumns" : 4,
"sHeightMatch" : "auto"
},
};
import: if you want to reload new url(action),here is the solution: first step: Initialize table variables at the JSP file,like this: import:如果你想重新加载新的url(动作),这里有解决方案:第一步:在JSP文件中初始化表变量,如下所示:
<script type="text/javascript">
var wageNowTable;//Table global variables, do not put in the ready function, otherwise it is not a global variable
</script>
second step: Add the following code to the JS file,like this: 第二步:将以下代码添加到JS文件中,如下所示:
$("#wages-query")
.click(
function() {
var datatables_options = {
"aLengthMenu" : [ [ 5, 10, 50, 100,500, -1 ],[ 5, 10, 50, 100,500, "All" ] ],
"iDisplayLength" : 5,
//The following SDOM, 1.9 version will not show up
"sDom": 'T<"clear">rt<"float_left"i><"float_right_nexpage"p><"float_right_display"l>',
//"sDom" : "<r>t<'float_left'i><'float_right_nexpage'p><'float_right_display'l>>",
"bSort" : false,
"bProcessing" : false,
"bServerSide" : true,
"bStateSave" : true,
"bDestroy" : true,
"bDeferRender":true,
"bJQueryUI" : false,
"sScrollX" : "100%",
"bStateSave":true,
"language" : oLanguageData,
// "aaData" : data,
"aoColumns" : aoColumnsData,
"fnRowCallback" : function(nRow, aData,
iDataIndex) {
},
"sAjaxSource" : "wageQuery.action?wageDate="
+ date,
"fnServerData" : function(sSource, aoData,
fnCallback) {
$.ajax({
"type" : 'post',
"async":false,
"url" : sSource,
"dataType" : "json",
"data" : aoData,
"success" : function(resp) {
fnCallback(resp);
}
});
},
"fixedColumns": {
"iLeftColumns" : 4,
"sHeightMatch" : "auto"
},
};
//Determine whether the table has been an instance, there is no instance, has been a direct update, load the corresponding URL
if (typeof(wageNowTable) == "undefined") {
wageNowTable = $('#sample_1').dataTable(datatables_options);
}else{
var oSettings = wageNowTable.fnSettings();
oSettings.sAjaxSource = "wageQuery.action?wageDate="
+ date;
wageNowTable.fnDraw(false);//Don't jump to the first page, the page number and the reserved page displays the number of
wageNowTable.fnDraw(false);//
}
//Important point: listen to the state of the check box, the important need to use the form of on, the direct click can not change the state
$('.DTFC_LeftHeadWrapper div').on('click','input' ,function () {
$("#uniform-check-all").removeClass("checker");
$("span").removeClass("checked");
var val = $(this).prop("checked");
$("input[type='checkbox']", ".DTFC_LeftHeadWrapper").attr("checked", val);
$("#check-all").attr("checked", val);
if (val) {
$(".checkboxes").each(function(index){
$(this).attr("checked", val);
});
} else {
$(".checkboxes").each(function(index){
$(this).attr("checked", val);
});
}
} );
});
Determine whether the table has been an instance, there is no instance, has been a direct update, load the new URL: 确定表是否已经是实例,没有实例,已经直接更新,加载新的URL:
if (typeof(wageNowTable) == "undefined") {
wageNowTable = $('#sample_1').dataTable(datatables_options);
}else{
var oSettings = wageNowTable.fnSettings();
oSettings.sAjaxSource = "wageQuery.action?wageDate="
+ date;
//need twice fndraw
wageNowTable.fnDraw(false);
wageNowTable.fnDraw(false);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.