下面js代碼是在前端進行分頁,主要是利用表格插件的parseData參數,該參數觸發是在請求數據回來後,但還未顯示在表中時觸發的。
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#gridTable' ,
url: contextPath + '/pages/json/手工合同.json',
method: 'get',
request: {
limitName: 'rows', //每頁數據量的參數名,默認:limit
pageName: 'page',
},
where: {
},
cols: [columns],
response: {
statusName: 'result', //數據狀態的字段名稱,默認:code
statusCode: 200, //成功的狀態碼,默認:0
dataName: 'rows', //數據列表的字段名稱,默認:data
countName: 'total',//規定數據總數的字段名稱,默認:count
},
page: true,
parseData: function(res){
var dataList = res.rows;
/* 如果需要前端做模擬查詢,可以在此處寫,先過濾數據
var temp = dataList;
dataList = [];
for(var i=0; i<temp.length; i++){
if(條件1){
flag1 = true;
}
if(條件2){
flag2 = true;
}
if(flag1 && flag2){
dataList.push(temp[i]);
}
} */
var total = dataList.length; //請求的數據總數
var list = []; //用來保存當前頁顯示的數據
//前端模擬分頁,獲取當前頁、分頁顯示數據量
var page = $("#layui-table-page1").find(".layui-laypage-em").next().html();
var limit = $("#layui-table-page1").find(".layui-laypage-limits select").val();
console.log(page + ", " + limit);
if(page == undefined || page == null || page == ""){
page = 1;
}
if(limit == undefined || limit == null || limit == ""){
limit = 10;
}
//數據從哪條數據開始
var start = (page-1) * limit;
//數據從哪條數據結束
var end = page * limit;
if(end > total){
end = total;
}
//取分頁數據
for(var i=start; i<end; i++){
list.push(dataList[i]);
}
return {
"result": 200, //解析接口狀態
"total": total, //解析數據長度
"rows": list //解析數據列表
}
},
});
});