layui table 分页功能实现

今天看自己写的用layui table实现的页面效果,内容太多了,突发奇想加个分页,在百度里找了很多种方法,都不好用,可怎么也不想放弃,就一直找啊,尝试啊,无意间发现了一种简单好用的办法,完美的实现了效果!希望看到这篇文章的各位少走些弯路,一起加油!

链接在此:https://www.html.cn/framework/layui/18354.html

全部代码粘贴如下:

 layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            , url: '../srv/serviceConfirmmation/selectServiceConfirmmationInfoByUserId'
            , where: {
                companyId: serviceUnit,
                region: region,
                sDate: sDate,
                eDate: eDate,
                userName: userName
            }
            , cols: [[
                { field: 'id', title: 'id', hide: true }
                , { field: 'no', width: '16%', title: '编号' }
                , { field: 'userName', width: '8%', title: '发起人' }
                , { field: 'unitName', width: '23%', title: '单位名称' }
                , {
                    field: 'addDate', width: '15%', title: '发起时间', sort: true,
                    templet: "<div>{{layui.util.toDateString(d.addDate, 'yyyy-MM-dd HH:mm:ss')}}</div>"
                }
                , {
                    field: 'sDate', width: '9%', title: '开始时间', sort: true,
                    templet: "<div>{{layui.util.toDateString(d.sDate, 'yyyy-MM-dd')}}</div>"}
                , {
                    field: 'eDate', width: '9%', title: '结束时间', sort: true,
                    templet: "<div>{{layui.util.toDateString(d.eDate, 'yyyy-MM-dd')}}</div>"
                }
                //, {
                //    field: 'state', width: '8%', title: '单据状态'
                //}
                , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: '20%' }
            ]]

            //加分页功能
            , page: true
            , limits: [10, 20, 50]  //一页选择显示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 //解析数据列表
                };
            }
           
        });

 

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值