layUI分页功能讲解及后台+前端实现

最新推荐文章于 2025-04-15 13:18:52 发布

唐傘皮

最新推荐文章于 2025-04-15 13:18:52 发布

阅读量9.8k

点赞数 5

分类专栏： web

本文链接：https://blog.youkuaiyun.com/qq_43520913/article/details/109604977

版权

本文详细讲解了layUI的分页原理，包括前端如何通过laypage.render设置分页逻辑，以及如何在后台接收并处理page和limit参数来实现数据分段返回。通过实例展示了表格HTML、JS代码和相关后台代码片段，帮助理解前后端配合实现分页的过程。

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

文章目录

参考下列博文，踩坑好几天，做个记录
博文一：
博文二：

一：原理讲解

在LAYUI中，自带一个分页page控件，当我们将page设为true时就会有下面的分页控件，但是分不了页，因为没有后台控制数据和一个 laypage.render去控制分页的逻辑实现
在这里插入图片描述
而当我们增加laypage.render的代码后（代码见下文）点击分页的页码时，layUI会内置一个ajax去向后台请求后面的数据，大家可以按住F12进入network控制台，当点击页码时就会出现下图的提交

对比表格的ajax的URL
在这里插入图片描述
会发现多了两个参数一个page一个limit，这是layUI自动添加的，大家不要以为是我自己写的ajax想后台请求的啊，所以这样的话我们需要在后台接收这两个参数，并将它作为划分数据的依据，也就是说前端请求后台要数据，而后台给一部分数据到前台，并不是一次性查询所有数据送到前端，根据这思路这就很好实现了
在这里插入图片描述

二：表格HTML代码

<div>
        <table id="demo" lay-filter="test"></table>
    </div>

三：js代码

  layui.use('table', function () {
   
                                        var table = layui.table;
                                        var laypage = layui.laypage;
                                        //第一个实例
                                        table.render({
   
                                            elem: '#demo'
                                            , height: 450
                                            ,type:'post'
                                            , url: "AssociationAnalysisServlet?method=formData"//数据接口

                                            , page: true //开启分页
                                            , cols: [[ //表头
                                                {
   templet: '#xuhao', title: 'ID', width: 80, sort: true,

最低0.47元/天解锁文章