datagrid 重载本地数据_Jquery datatables 重新加载数据

Datatables这个表格控件只能说实在太强大了，支持很多的扩展，也有对应的中文网站，上面有很多的解决方案，项目中有一个界面，需要使用表格来展示，不过数据很少，只有5列，所以就没采用后台分页的形式，直接点击查询，通过发送ajax，每次判断表格是否已经初始化，如果已经初始化，则清空之前的数据，重新生成一个表格，如下js：

var WageSummary = function() { // 这个js可以放在jsp的ready函数里面进行下载，对查询按钮进行监听：

return {

init : function() {

// 查询按钮监听

$("#query")

.click(

function() {

var wageBeginDate = document

.getElementById("wageBeginDate").value;

var wageEndDate = document

.getElementById("wageEndDate").value;

// 刷新表格数据,2016年11月8日09:42:46

$.ajax({

url : "wageSummary.action",

type : "POST",

async : false,

data : {

"wageBeginDate" : wageBeginDate,

"wageEndDate" : wageEndDate

},

dataType : "json", // ajax返回值设置为text(json格式也可用它返回，可打印出结果，也可设置成json)

success : function(data) {

if (data == null) {

alert("获取数据失败,请重新选择日期");

return false;

}

$('#sample_1').show();

if (typeof(wageSummaryTable) == "undefined") {

wageSummaryTable = $('#sample_1').dataTable(

{

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

"iDisplayLength" : 10,

"sDom": 'Trt',

"oLanguage" : oLanguageData,

"aoColumns" : aoColumnsData,

"aaData" : data,

"bDestroy" : true,

"retrieve": true,//保证只有一个table实例

"aoColumnDefs": [

{ "sType": "html-percent", "aTargets": [0] }, //指定列号使用自定义排序

],

});

}else{

wageSummaryTable.fnClearTable();//清空数据.fnClearTable();//清空数据

wageSummaryTable.fnDestroy(); //还原初始化了的datatable

wageSummaryTable = $('#sample_1').dataTable(

{

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

"iDisplayLength" : 10,

"sDom": 'Trt',

"oLanguage" : oLanguageData,

"aoColumns" : aoColumnsData,

"aaData" : data,

"bDestroy" : true,

"retrieve": true,//保证只有一个table实例

"aoColumnDefs": [

{ "sType": "html-percent", "aTargets": [0] }, //指定列号使用自定义排序

],

});

}

},

error : function(data) {

alert("获取数据失败,请重新选择日期");

}

});

});

}

}

}();

var oLanguageData = {

"sProcessing" : "处理中...",

"sLengthMenu" : "显示 _MENU_ 项结果",

"sZeroRecords" : "没有匹配结果",

"sInfo" : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",

"sInfoEmpty" : "显示第 0 至 0 项结果，共 0 项",

"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",

"sInfoPostFix" : "",

"sSearch" : "搜索:",

"sUrl" : "",

"sEmptyTable" : "表中数据为空",

"sLoadingRecords" : "载入中...",

"sInfoThousands" : ",",

"oPaginate" : {

"sFirst" : "首页",

"sPrevious" : "上页",

"sNext" : "下页",

"sLast" : "末页"

},

"oAria" : {

"sSortAscending" : ": 以升序排列此列",

"sSortDescending" : ": 以降序排列此列"

}

};

// 列的定义

var aoColumnsData = [

{

"mData" : "positionRank"

},

/*

* 最高

*/

{

"mData" : "mostHigh"

},

/*

* 最低

*/

{

"mData" : "mostlow"

},

/*

* 平均

*/

{

"mData" : "wageAverage"

},

/*

* 人数

*/

{

"mData" : "amount"

}

];         2.注意的是表格的变量是一个全局的，放在一个script里面就好，我的是这样的：

var wageSummaryTable;

//发ajax获取有数据的月份

var wageMonths={};//从数据库中查询有数据的月份list集合

}       3.第二个注意

点是使用的是datatables的1.10版本，所以要使用清空数据的函数的话，就可以使用：

wageSummaryTable.fnClearTable();//清空数据.fnClearTable();//清空数据

wageSummaryTable.fnDestroy(); //还原初始化了的datatable

如果你使用了后台分页的形式的话，每次点击查询按钮需要重新加载url的话，就可以参考我的这个链接：

后台刷新url