数据表ajax从新的源重新加载
datatables ajax reload from new source
如何使用新的ajax功能重新加载数据表？
我认为这是一个范围问题。
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
});
},
});
}
尝试从不同的数据源重新加载：
$("input[type="button"]").on('click',function()
{
oTable.ajax.url( 'newsource' ).load();
alert( 'Data source: '+oTable.ajax.url() );
});
警报输出：src:newsource
浏览器从src:oldsource加载表
对于将来遇到这个问题的人，我也遇到过同样的问题，下面是解决方案：
完成从不同来源重新加载数据：
引用DOM表元素NOTDataTable对象，否则将得到一个重新初始化错误：
步骤1：清除数据：
$('#your_table_name').DataTable().clear();
步骤2：销毁DataTable对象
$('#your_table_name').DataTable().destroy();
如果您使用的是子行，这是非常重要的删除点击侦听器
$( "#your_table_name tbody" )
.off( "click", "td.details-control");
Reinit数据表：
loadTable('newsource','your_table_name')
和您的loadTable功能
function loadTable(src,tableName)
{
var oTable = $('#'+tableName).DataTable({
'bProcessing' : true,
'bServerSide' : true,
'responsive' : true,
"sDom": '<"toolbar"lfr>tip<"F">R',
'sAjaxSource' : src,
});
//initchildrows()
}
是的，这似乎是一个范围问题。您将dataTables实例分配给一个本地变量：
function load_table(tableName,src)
{
var oTable = $('#'+tableName).DataTable({
'bProcessing' : true,
...
将其分配给全局变量：
var oTable;
function load_table(tableName,src)
{
oTable = $('#'+tableName).DataTable({
'bProcessing' : true,
...
如果它仍然不起作用——但应该起作用，您使用的oTable.ajax.url(<src>).load()刚刚好——那么只需使用destroy : true选项重新初始化表：
var oTable;
function load_table(tableName,src)
{
oTable = $('#'+tableName).DataTable({
destroy : true,
'bProcessing' : true,
...
并从事件调用load_table：
$("input[type='button']").on('click',function()
{
load_table('tableName', 'newsource');
});
谢谢，这是我的解决方案，它并不完美，必须发送两次url，感谢这位作者：我如何修改查询数据表的ajax url？例如：如果你这样初始化数据表：
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：如果您想重新加载新的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>
第二步：将以下代码添加到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);
});
}
} );
});
确定表是否已经是实例，是否没有实例，是否已经直接更新，加载新的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);
}
相关文章：
- 创建新数据和加载现有数据需要单独的视图吗
- 钛 - HTTPClient:打开新的控制器加载
- 保持 JavaScript 在浏览器控制台中运行，即使在新的页面加载之后也是如此
- 路由到新页面时加载不起作用
- 如何在新窗口完成加载后执行某些内容
- 使用新标题重新加载 html 页面
- Primefaces在打开新页面时加载数据消息
- Wordpress音频播放器和平滑状态.在新页面重新加载播放器时调用什么回调函数
- 用新数据重新加载renderer3d
- 文本不被渲染后，新的页面加载- JQuery移动
- 需要在新标签中加载pdf/doc文件，而不是下载，只是想在浏览器中阅读
- 用新参数重新加载页面
- Js和CSS不检测新页面何时加载
- 在新页面上加载一个flash视频，它在上一页上的位置
- 在新窗口中加载代码编写器视图
- 在控制台中使用新脚本重新加载页面
- 如何在加载新页面后加载AJAX数据
- 如何使用jQuery在新窗口中加载页面，然后关闭它们
- Jquery没有看到新的HTML加载到对话框中
- 无法用新值重新加载JGrid
