layui table 前端实现分页,超简单

先利用layui table中的parseData方法手动将数据切片分页,代码如下,要点是parseData: function(res){}中的方法,对从url中get到的数据进行手动分页处理。
layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test' ,url:'http://localhost:8099/getScoreRecord' ,title:'积分操作记录表' ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增 ,cols: [[ {field:'sc_re_index', title: '序号', sort: true} ,{field:'user_acc', title: '账户名'} ,{field:'operate_value', title: '积分数额', sort: true} ,{field:'rest_value', title: '剩余积分'} ,{field:'sc__re_description', title: '备注'} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增 ,{field:'operate_time', title: '积分操作时间', minWidth: 100, sort: true} ]] ,page: true ,limits: [3,5,10] //一页选择显示3,5或10条数据 ,limit: 10 //一页显示10条数据 ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据,res为从url中get到的数据 var result; console.log(this); console.log(JSON.stringify(res)); if(this.page.curr){ result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr); } else{ result=res.data.slice(0,this.limit); } return { "code": res.code, //解析接口状态 "msg": res.msg, //解析提示文本 "count": res.count, //解析数据长度 "data": result //解析数据列表 }; } }); });

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值