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": 'T<"clear">rt<"float_left"i><"float_right_nexpage"p><"float_right_display"l>',
"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": 'T<"clear">rt<"float_left"i><"float_right_nexpage"p><"float_right_display"l>',
"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里面就好，我的是这样的：