layui表格分页不生效怎么解决?

layui表格分页不生效(无法正常显示)怎么解决?下面本篇文章给大家介绍一下layui数据表格分页无法正常显示的解决方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

应该先利用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 //解析数据列表
                };
            }
        });
    });

更多web前端知识,请查阅 HTML中文网 !!

以上就是layui表格分页不生效怎么解决?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Layui 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏