layui table數據表格前端分頁

下面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 //解析數據列表
					}
				},
			});
		});

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章