layui laypage分页操作方法 layui怎样单独使用分页组件

作者：袖梨 2026-07-29

laypage可独立使用，只需引入layui.js和layui.css，调用layui.laypage.render()即可；elem参数不支持“#”前缀，jump回调需用first判断避免重复请求，count须准确反映总数据量。

layui 中的 laypage 能够与 layui 的其他模块完全分离并独立使用，只需引入 layui.js 以及 layui.css，随后根据需要调用 laypage.render() 即可——它不依赖 jquery，既不强制使用表单或表格结构，也并非“只有配合 laytpl 才可以渲染数据”。

以最少内容引入并初始化 laypage 的方法

很多人在开始时就被难住，误以为必须加载完整的 layui.all.js ，或者一定要通过 layui.use() 进行异步加载，实际并非如此。

laypage 核心逻辑已经随包提供，而它本身属于 layui 内置模块 layui.js 完成打包，因此页面只要加载 layui.js，layui.laypage 便能使用
无须使用 jquery（layui 对 jQuery 的依赖已从 2025 年起取消）
也无须预先编写 <script type="text/html"> 模板——laypage 它仅负责生成页码 DOM，数据如何渲染则由你自己的逻辑决定
最精简的 HTML 结构只要准备一个空容器：<div id="pagination"></div>

代码示例：

layui.laypage.render({  elem: 'pagination',  count: 123,  limit: 10,  curr: 1,  jump: function(obj) {    console.log('当前页：', obj.curr); // 用于触发你的数据加载逻辑  }});

为什么 `elem` 不可以包含 `#` 号

新手最常在这里遇到报错：Uncaught TypeError: Cannot read property 'innerHTML' of null，其根本原因是传入了 elem: '#pagination'。

laypage.render() 的 elem 参数仅能接收以下两类值：String（ID 名，不包含 #）或者 HTMLElement（DOM 对象）
如果传入 '#pagination' laypage 会尝试把它用作 ID，而此前它已被按文本字符串处理，再去 document.getElementById()，最终获得 null
应当写为 elem: 'pagination' 或者 elem: document.getElementById('pagination')

`jump` 如何在回调中安全地加载新页数据

jump 它并非仅运行一次；每次切换页码时都会触发，包括首次渲染、点击跳页和手动输入页码。最容易被忽视的是 first 参数——它用于标记当前是否属于首次渲染。

如果在 jump 中不作判断就发起 AJAX，首次渲染会对第 1 页重复请求两次（一次由 render 自动触发，另一次来自手动调用）
需要利用 if (!first) { /* 加载数据 */ } 将首次自动调用过滤掉
obj.curr 与 obj.limit 都是实时参数，应直接作为后端分页参数使用，不要将其硬编码 page=1
如果还要携带搜索条件，应把条件变量闭包到 jump 函数内部，避免读取全局值而造成状态不同步

前端静态分页和服务端分页以何处为界 vs

有些人会尝试使用 laypage 数据一旦过千，前端数组采用“全量分页”便会卡顿，问题并不在 laypage 自身的问题，而是使用场景选择错误。

laypage 它本身只生成页码栏，并不负责数据切片；所谓“前端分页”，实际上需要你在 jump 中通过 slice() 完成数组截取
实际项目的数据达到 >100 条时，就应改由后端分页，以减少传输、避免内存堆积并支持排序/过滤下推
若确实需要前端分页，一定要加入防抖并缓存原始数组，否则连续快速点击页码会多次触发 slice 以及重绘
count 必须保持准确，因为总页数的显示由它决定。在前端分页场景中，count = data.length；而在服务端分页场景中，count 必须取自接口返回的 total 字段，不可以通过 data.length 计算