layui表格分页栏显示“当前第x条到第y条”需同时满足:page.layout包含'count'、'page'、'limit';response或parseData正确返回count;page.curr和page.limit为有效正整数且limit在limits数组中。

layui表格分页栏怎么显示「当前第 x 条到第 y 条」
默认不显示,必须手动开启并确保 parseData 正确返回 count 和 data,否则区间计算无依据。
page.layout 必须包含 'count' 和 'page',且不能漏掉 'limit'
只写 page: true 或只配 layout: ['prev', 'page', 'next'],区间文字(如“显示第 1 到 10 条,共 123 条”)根本不会渲染。
-
count控制是否显示总条数和区间文字 -
page控制页码数字区域(但区间文案实际由curr/limit/count共同推导) -
limit必须存在——没有它,layui 无法算出“第几条到第几条”,即使你写了limits
推荐写法:layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],缺一不可。
后端返回结构不匹配会导致区间计算失效
layui 默认从响应里取 count 字段算总数,再结合 curr 和 limit 推导区间。如果后端字段是 total 或嵌套在 data.pagination.total,必须显式映射:
- 字段名不同 → 用
response: { countName: 'total' } - 字段嵌套深 → 必须用
parseData提前解构:parseData: res => ({ data: res.data.list, count: res.data.pagination.total }) -
parseData函数里没 return 含count的对象 → 区间永远显示“第 0 到 0 条”
page.curr 和 page.limit 必须为有效正整数
哪怕后端返回了正确 count,只要 curr 是 undefined、null 或非数字,或 limit 不在 limits 数组中,区间文案就会塌陷为“第 NaN 到 NaN 条”或直接不出现。
- 别依赖
page: true的默认值,显式写page: { curr: 1, limit: 10 } -
limits: [10, 20, 50],则limit: 10必须是其中之一,否则下拉菜单无法回显,连带区间计算失败 - 移动端小屏下,若
limits过多(如超过 4 个),下拉弹层可能被截断,用户选不了真正想要的limit值,导致区间始终卡在默认值
最常被忽略的一点:区间文案不是独立配置项,它完全依赖 count、curr、limit 三者同时有效且可运算。少一个,就只剩干瘪的页码数字。











