ajax data==1,jquery - Datatables 1.10 reload ajax data - Stack Overflow

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? eg: if you If you initialize datatable like this：

var datatables_options = {

"aLengthMenu" : [ [ 5, 10, 50, 100,500, -1 ],[ 5, 10, 50, 100,500, "All" ] ],

"iDisplayLength" : 5,

//如下的sdom，1.9的版本会显示不出来，

"sDom": 'Trt',

//"sDom" : "t>",

// 第一列禁止排序,因为这是复选框,不需要排序

"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"

},

};

import: if you want to reload new url(action),here is the solution： first step： Initialize table variables at the JSP file，like this:

var wageNowTable;//表格全局变量，不要放在ready函数内，否则就不是全局变量

second step: Add the following code to the JS file,like this:

$("#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": 'Trt',

//"sDom" : "t>",

// 第一列禁止排序,因为这是复选框,不需要排序

"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(

"");

//由于固定列的原因,当名字超过一定长度,表格就显示错乱,需要限定3个汉字,用...表示

if (GetLength(aData.name) > 6) {

$('td:eq(2)', nRow).html(

"" + cutstr(aData.name, 6)

+ " ");

}else{

$('td:eq(2)', nRow).html(

"" + aData.name

+ " ");

}

},

"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("取消下面全选");

});

}

} );

});

Determine whether the table has been an instance, there is no instance, has been a direct update, load the new 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);//不会跳转到第一页，保留页面的页码和显示条数

}