layui前端分页需设page为对象而非true,data传全量数组时自动启用前端分页;须在parseData中手动slice切片,并每次reload更新page.curr、limit、count及limits数组。

layui 本身没有“假分页”这个概念,所谓假分页,就是前端一次性拿到全部数据,但只展示当前页的内容,翻页时不做请求,仅靠数组切片实现——这其实是「前端分页」,不是假的,只是没走后端。
为什么 page: true 不生效?
这是最常卡住的地方:你传了全量 data 数组,却还写 page: true,结果分页栏直接不渲染。
-
page: true只在后端分页模式下有效(即配置了url或没传data) - 一旦你用
data: [...]传数组,layui 表格自动切换为前端分页模式,此时page必须是对象,否则整个分页控件被忽略 - 错误示例:
page: true, data: list→ 分页栏消失 - 正确写法:
page: { curr: 1, limit: 10, layout: ['count','prev','page','next'] }, data: list
如何手动切片并保持翻页状态同步?
layui 不会帮你切数据,必须自己在 parseData 回调里做 slice,并确保每次翻页都重 render 表格。
-
parseData是唯一能拦截原始数据并返回当前页数据的地方 - 它接收的
res是你传进来的全量数组(不是接口响应),所以要手动计算起止索引:res.slice((curr - 1) * limit, curr * limit) - 每次改页码或改每页条数,必须调用
table.reload()并传入新data和更新后的page.curr、page.count - 搜索/排序后务必重置
page.curr = 1,否则用户搜完看到的是第 3 页的切片,但实际数据已变
为什么跳转输入框点了没反应?
因为前端分页模式下,skip 按钮默认不绑定逻辑——它只负责渲染,不触发 reload。
-
layout里写了'skip',但没配jump回调,点击后不会自动跳转 - 必须在
jump里手动处理:if (!first) { table.reload({ page: { curr: obj.curr } }) } - 注意:表格的
jump和独立laypage.render()的jump是两套逻辑,别混用 - 如果用了
parseData,reload 时也要带上它,否则切片逻辑丢失
容易被忽略的细节
前端分页看着简单,但真实项目里最容易崩在三个地方:总数没更新、搜索后页码错位、limit 下拉切换后数据重复或漏行。
-
count必须显式传data.length,不能依赖接口返回值;否则搜索后count还是旧总数 - 每次
reload都要传完整page对象,包括curr、limit、count,少一个就可能导致页码显示错乱 -
limits数组不能为空,哪怕只想要固定 10 条,也得写limits: [10],否则下拉框不出现,但 limit 字段仍需存在


















