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

 

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值