layui学习之二 表单数据分页

本文介绍了如何使用layui前端框架实现表单数据的分页展示。通过设置table模块的参数,如url指定数据接口,page设为true启用分页,limits设置每页显示条数选项。关键在于后台返回的数据格式需要符合layui的要求,即包含code、msg、count和data字段。如果数据已展示但分页无效,可能是后台未正确处理page和limit参数,需根据这两个参数来限制查询返回的数据条数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前端代码:<table class="layui-hide" id="demo" lay-filter="test"></table>

js代码:layui.use('table',function(){

    var table = layui.table;

    table.render(

            elem:'#demo',

            url:'数据接口',

            page:'true',//是否开启分页

            limits:[10,20,50],//选择每页显示多少条数据

            limit:10,//初始每页显示条数

             cols:[[//表头
{field:'id',width:80,title:'ID',sort:true}]

            response:{

                    code:'',

                    msg:'',

                    count:数据总数,

                    data:[]

                }

            )

})

这里需要注意后台传递的数据格式,{'code':0,'msg':'','count':'数据总数','data':[]} 一定要是这样的模式。如果有需要可以使用上面的response 来自定义返回的数据格式。

另外如果是可以展示数据,而分页没有起作用。所有的数据直接显示在页面,那么就是后台的问题,因为你在后台没有告诉页面一次显示多少数据。所以我没要在后台设置 page(当前页面) 和 limit(每页显示多少条).这两个参数是layui默认传递到后台的。你只需要直接获取即可。然后根据这两个参数设置查询数据的条数。这样页面分页就会起作用。最后附上的我demo.



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值