layui table数据表格前端分页

た入场券 2023-06-11 06:24 21阅读 0赞

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