[置顶] 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里面就好，我的是这样的：

<script>
    var wageSummaryTable;
    //发ajax获取有数据的月份
    var wageMonths={};//从数据库中查询有数据的月份list集合
}

3.第二个注意点是使用的是datatables的1.10版本，所以要使用清空数据的函数的话，就可以使用：

        wageSummaryTable.fnClearTable();//清空数据.fnClearTable();//清空数据        wageSummaryTable.fnDestroy(); //还原初始化了的datatable

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

秒客网

[置顶] Jquery datatables 重新加载数据

相关文章