数据表 1.10 重新加载 ajax 数据
Datatables 1.10 reload ajax data
我正在使用数据表 1.10 尝试更改 AJAX 源以从服务器重新加载新数据，但是它一直使用相同的 URL 现在更改为新的 url.我是否也需要以某种方式更改 sSource 我不确定问题是什么。
var oTable = $('#big_table').DataTable({
'bProcessing' : true,
'bServerSide' : true,
"sDom": '<"toolbar"lfr>tip<"F">R',
'sAjaxSource' : 'myServer/oldURL',
"columns": [],
'sPaginationType': 'full_numbers',
"aaSorting": [
[5, "desc"]
],
'bAutoWidth' : false,
'iDisplayLength': 15,
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
var rowCount = oTable.rows()[0].length;
// Update footer
$( api.column( 6 ).footer() ).html(
' ( Cards:'+ rowCount +')'
);
},
'fnServerData' : function(sSource, aoData, fnCallback)
{
$.ajax({
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : aoData,
'success' : fnCallback
});
},
});
重新加载数据
$("#change").click( function()
{
oTable.ajax.url('myServer/newURL').load();
});
从 myServer/oldURL
加载的数据
我 运行 遇到了同样的问题，并找到了一个简单的解决方案。只需使用 returns 全局变量而不是数据部分中的纯变量的函数：
<script type="text/javascript">
var cs = 0;
var dtconfig = {
"processing": true,
"serverSide": true,
"ordering": false,
"info": true,
"ajax": {
"url": "/JournalData",
"data": {
selectedStation: function () { return window.cs; }
}
},
"columns": [
{ "data": "ValueDate" },
{ "data": "StationText" },
{ "data": "DataPointText" },
{ "data": "ValueText" },
],
"aoColumnDefs": [
{
"aTargets": [0], //indexes of whatever columns you need to format
"mRender": function (data, type, full) {
if (data) {
var mDate = moment(data).local();
//return (mDate && mDate.isValid()) ? mDate.format("L LT") : "";
return (mDate && mDate.isValid()) ? moment(mDate).locale("de").format('DD.MM.YY HH:mm:ss') : "";
//return mDate.toLocaleString();
}
return "";
}
}
]
};
$(document).ready(function () {
$('#PaJournal').dataTable(dtconfig);
});
function UpdateStationFilter(StationId) {
cs = StationId;
var table = $('#PaJournal').DataTable();
table.ajax.reload();
}
</script>
现在我的 DataTable 重新加载了所需的数据，而不是坚持初始值。
谢谢，这是我的解决方案，它并不完美，必须发送两次url，感谢这位作者：How do I modify ajax url of a query datatable? 例如：如果你初始化数据table like这个：
var datatables_options = {
"aLengthMenu" : [ [ 5, 10, 50, 100,500, -1 ],[ 5, 10, 50, 100,500, "All" ] ],
"iDisplayLength" : 5,
//如下的sdom，1.9的版本会显示不出来，
"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, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
"bDestroy" : true,
"bDeferRender":true,//延迟加载html元素
"bJQueryUI" : false,
"sScrollX" : "100%",
"bStateSave":true,
"language" : oLanguageData,
// "aaData" : data,
"aoColumns" : aoColumnsData,
// 复选框点击下一页进行更新状态为未选中
"fnDrawCallback" : function() {//关键点：需要先去掉checkbox的父级div的类checker，因为这个会影响选中的显示效果
$("#uniform-check-all").removeClass("checker");
//切换下一页，去掉原来全选的checkbox的状态
$("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"
},
};
导入：如果要重新加载新的url（action），解决方法如下： 第一步：在JSP文件中初始化table变量，像这样：
<script type="text/javascript">
var wageNowTable;//表格全局变量，不要放在ready函数内，否则就不是全局变量
</script>
第二步：在JS文件中添加如下代码，如下：
$("#wages-query")
.click(
function() {
var date = document.getElementById("wageDate").value;
if (date.length == 0) {
alert("请选择月份");
return;
}
var datatables_options = {
"aLengthMenu" : [ [ 5, 10, 50, 100,500, -1 ],[ 5, 10, 50, 100,500, "All" ] ],
"iDisplayLength" : 5,
//如下的sdom，1.9的版本会显示不出来，
"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, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
"bDestroy" : true,
"bDeferRender":true,//延迟加载html元素
"bJQueryUI" : false,
"sScrollX" : "100%",
"bStateSave":true,
"language" : oLanguageData,
// "aaData" : data,
"aoColumns" : aoColumnsData,
// 复选框点击下一页进行更新状态为未选中
"fnDrawCallback" : function() {//关键点：需要先去掉checkbox的父级div的类checker，因为这个会影响选中的显示效果
$("#uniform-check-all").removeClass("checker");
//切换下一页，去掉原来全选的checkbox的状态
$("span").removeClass("checked");
$("span #check-all").attr("checked",false);
//更新表格
$.uniform.update();
},
"fnRowCallback" : function(nRow, aData,
iDataIndex) {
var temp = aData.number;
var temp = aData.name;
$('td:eq(0)', nRow).html(
"<input type='checkbox' name='everyline' class='checkboxes' value="
+ aData.number
+ "></input>");
//由于固定列的原因,当名字超过一定长度,表格就显示错乱,需要限定3个汉字,用...表示
if (GetLength(aData.name) > 6) {
$('td:eq(2)', nRow).html(
"<a style='cursor:pointer' onclick='toWagePerson(\""
+ date + "\",\""
+ aData.identification
+ "\");'>" + cutstr(aData.name, 6)
+ "</a> ");
}else{
$('td:eq(2)', nRow).html(
"<a style='cursor:pointer' onclick='toWagePerson(\""
+ date + "\",\""
+ aData.identification
+ "\");'>" + aData.name
+ "</a> ");
}
},
"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"
},
};
// 设置固定前三列的功能
datatables_options["sScrollX"] = "100%";
datatables_options["sScrollY"] = "400px";
datatables_options["bScrollCollapse"] = true;
// datatables_options["sScrollXInner"] = '150%';
//判断表格是否已经实例化，没有则实例化，已经实例化，则直接更新，加载对应的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);//不会跳转到第一页，保留页面的页码和显示条数
wageNowTable.fnDraw(false);//不会跳转到第一页，保留页面的页码和显示条数
}
// 重要注意点:
// 2016年10月31日16:38:51:qiulinhe:固定列的复选框在查询数据之后更新状态
//重要一点：监听复选框的状态，重要需要使用on的形式，直接click无法改变状态
$('.DTFC_LeftHeadWrapper div').on('click','input' ,function () {
$("#uniform-check-all").removeClass("checker");
//切换下一页，去掉原来全选的checkbox的状态
$("span").removeClass("checked");
//表格绘制完成，监听全选的复选框按钮，将表格所有选中
//alert("全选的按钮事件");
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);
// alert("设置下面全选");
});
} else {//不勾选
$(".checkboxes").each(function(index){
$(this).attr("checked", val);
//alert("取消下面全选");
});
}
} );
});
判断table是否已经有实例，没有实例，已经直接更新，加载新的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);//不会跳转到第一页，保留页面的页码和显示条数
wageNowTable.fnDraw(false);//不会跳转到第一页，保留页面的页码和显示条数
}
我正在使用数据表 1.10 尝试更改 AJAX 源以从服务器重新加载新数据，但是它一直使用相同的 URL 现在更改为新的 url.我是否也需要以某种方式更改 sSource 我不确定问题是什么。
var oTable = $('#big_table').DataTable({
'bProcessing' : true,
'bServerSide' : true,
"sDom": '<"toolbar"lfr>tip<"F">R',
'sAjaxSource' : 'myServer/oldURL',
"columns": [],
'sPaginationType': 'full_numbers',
"aaSorting": [
[5, "desc"]
],
'bAutoWidth' : false,
'iDisplayLength': 15,
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
var rowCount = oTable.rows()[0].length;
// Update footer
$( api.column( 6 ).footer() ).html(
' ( Cards:'+ rowCount +')'
);
},
'fnServerData' : function(sSource, aoData, fnCallback)
{
$.ajax({
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : aoData,
'success' : fnCallback
});
},
});
重新加载数据
$("#change").click( function()
{
oTable.ajax.url('myServer/newURL').load();
});
从 myServer/oldURL
我 运行 遇到了同样的问题，并找到了一个简单的解决方案。只需使用 returns 全局变量而不是数据部分中的纯变量的函数：
<script type="text/javascript">
var cs = 0;
var dtconfig = {
"processing": true,
"serverSide": true,
"ordering": false,
"info": true,
"ajax": {
"url": "/JournalData",
"data": {
selectedStation: function () { return window.cs; }
}
},
"columns": [
{ "data": "ValueDate" },
{ "data": "StationText" },
{ "data": "DataPointText" },
{ "data": "ValueText" },
],
"aoColumnDefs": [
{
"aTargets": [0], //indexes of whatever columns you need to format
"mRender": function (data, type, full) {
if (data) {
var mDate = moment(data).local();
//return (mDate && mDate.isValid()) ? mDate.format("L LT") : "";
return (mDate && mDate.isValid()) ? moment(mDate).locale("de").format('DD.MM.YY HH:mm:ss') : "";
//return mDate.toLocaleString();
}
return "";
}
}
]
};
$(document).ready(function () {
$('#PaJournal').dataTable(dtconfig);
});
function UpdateStationFilter(StationId) {
cs = StationId;
var table = $('#PaJournal').DataTable();
table.ajax.reload();
}
</script>
现在我的 DataTable 重新加载了所需的数据，而不是坚持初始值。
谢谢，这是我的解决方案，它并不完美，必须发送两次url，感谢这位作者：How do I modify ajax url of a query datatable? 例如：如果你初始化数据table like这个：
var datatables_options = {
"aLengthMenu" : [ [ 5, 10, 50, 100,500, -1 ],[ 5, 10, 50, 100,500, "All" ] ],
"iDisplayLength" : 5,
//如下的sdom，1.9的版本会显示不出来，
"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, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
"bDestroy" : true,
"bDeferRender":true,//延迟加载html元素
"bJQueryUI" : false,
"sScrollX" : "100%",
"bStateSave":true,
"language" : oLanguageData,
// "aaData" : data,
"aoColumns" : aoColumnsData,
// 复选框点击下一页进行更新状态为未选中
"fnDrawCallback" : function() {//关键点：需要先去掉checkbox的父级div的类checker，因为这个会影响选中的显示效果
$("#uniform-check-all").removeClass("checker");
//切换下一页，去掉原来全选的checkbox的状态
$("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"
},
};
导入：如果要重新加载新的url（action），解决方法如下： 第一步：在JSP文件中初始化table变量，像这样：
<script type="text/javascript">
var wageNowTable;//表格全局变量，不要放在ready函数内，否则就不是全局变量
</script>
第二步：在JS文件中添加如下代码，如下：
$("#wages-query")
.click(
function() {
var date = document.getElementById("wageDate").value;
if (date.length == 0) {
alert("请选择月份");
return;
}
var datatables_options = {
"aLengthMenu" : [ [ 5, 10, 50, 100,500, -1 ],[ 5, 10, 50, 100,500, "All" ] ],
"iDisplayLength" : 5,
//如下的sdom，1.9的版本会显示不出来，
"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, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
"bDestroy" : true,
"bDeferRender":true,//延迟加载html元素
"bJQueryUI" : false,
"sScrollX" : "100%",
"bStateSave":true,
"language" : oLanguageData,
// "aaData" : data,
"aoColumns" : aoColumnsData,
// 复选框点击下一页进行更新状态为未选中
"fnDrawCallback" : function() {//关键点：需要先去掉checkbox的父级div的类checker，因为这个会影响选中的显示效果
$("#uniform-check-all").removeClass("checker");
//切换下一页，去掉原来全选的checkbox的状态
$("span").removeClass("checked");
$("span #check-all").attr("checked",false);
//更新表格
$.uniform.update();
},
"fnRowCallback" : function(nRow, aData,
iDataIndex) {
var temp = aData.number;
var temp = aData.name;
$('td:eq(0)', nRow).html(
"<input type='checkbox' name='everyline' class='checkboxes' value="
+ aData.number
+ "></input>");
//由于固定列的原因,当名字超过一定长度,表格就显示错乱,需要限定3个汉字,用...表示
if (GetLength(aData.name) > 6) {
$('td:eq(2)', nRow).html(
"<a style='cursor:pointer' onclick='toWagePerson(\""
+ date + "\",\""
+ aData.identification
+ "\");'>" + cutstr(aData.name, 6)
+ "</a> ");
}else{
$('td:eq(2)', nRow).html(
"<a style='cursor:pointer' onclick='toWagePerson(\""
+ date + "\",\""
+ aData.identification
+ "\");'>" + aData.name
+ "</a> ");
}
},
"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"
},
};
// 设置固定前三列的功能
datatables_options["sScrollX"] = "100%";
datatables_options["sScrollY"] = "400px";
datatables_options["bScrollCollapse"] = true;
// datatables_options["sScrollXInner"] = '150%';
//判断表格是否已经实例化，没有则实例化，已经实例化，则直接更新，加载对应的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);//不会跳转到第一页，保留页面的页码和显示条数
wageNowTable.fnDraw(false);//不会跳转到第一页，保留页面的页码和显示条数
}
// 重要注意点:
// 2016年10月31日16:38:51:qiulinhe:固定列的复选框在查询数据之后更新状态
//重要一点：监听复选框的状态，重要需要使用on的形式，直接click无法改变状态
$('.DTFC_LeftHeadWrapper div').on('click','input' ,function () {
$("#uniform-check-all").removeClass("checker");
//切换下一页，去掉原来全选的checkbox的状态
$("span").removeClass("checked");
//表格绘制完成，监听全选的复选框按钮，将表格所有选中
//alert("全选的按钮事件");
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);
// alert("设置下面全选");
});
} else {//不勾选
$(".checkboxes").each(function(index){
$(this).attr("checked", val);
//alert("取消下面全选");
});
}
} );
});
判断table是否已经有实例，没有实例，已经直接更新，加载新的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);//不会跳转到第一页，保留页面的页码和显示条数
wageNowTable.fnDraw(false);//不会跳转到第一页，保留页面的页码和显示条数
}