要隐藏分页栏的「每页显示条数」下拉框,需设 limits: [] 并配合 limit: 15;删去 layout 中 'jump' 可隐藏跳转输入框;用 .layui-table-page { display: none } 隐藏整个分页栏但保留逻辑;用 .layui-laypage-count { display: none !important } 隐藏「共 N 条」文字。
怎么隐藏分页栏的「每页显示条数」下拉框
直接设 limits: [],并固定 limit 值。layui 只有在 limits 数组长度 ≥ 2 时才渲染下拉框;长度为 1 会渲染一个不可展开的输入框(视觉上仍存在);空数组才会彻底不生成 dom。
常见错误是只写 limit: 10 却没动 limits,结果下拉框还在——这不是隐藏,是默认选中。
-
page: { limit: 15, limits: [] }→ 下拉框消失,且请求始终带limit=15 - 若用服务端分页(
url+parseData),该配置照常生效 - 表格 reload 后,
limits: []不会被继承,必须在每次reload的参数里重新声明
怎么隐藏「跳转到第 X 页」输入框
从 page.layout 数组里删掉 'jump'。这个字段是纯前端开关:存在就渲染,不存在就不生成 DOM,不依赖 CSS 或 JS 干预。
注意顺序:'jump' 必须放在 layout 末尾才能正常显示;如果加了却不出现,先检查总页数是否 ≤ 1(Layui 会自动隐藏),再查容器宽度是否过窄导致溢出隐藏。
-
layout: ['count', 'prev', 'page', 'next', 'limit']→ 没有'jump',输入框彻底消失 -
layout: ['jump', 'count']→ 可能被截断或错位,不推荐 - 全局统一管理时,建议抽成常量,比如
const LAYOUT_NO_JUMP = ['count', 'prev', 'page', 'next', 'limit']
怎么隐藏整个分页栏但保留分页逻辑
不能设 page: false,否则数据全量加载、不发 page/limit 参数。正确做法是用 CSS 隐藏容器:.layui-table-page。
最稳妥的时机是在 done 回调里执行 $('.layui-table-page').hide(),确保 DOM 已就绪。若用全局 CSS,记得加 !important,否则 Layui 内联样式可能覆盖。
- 别用
visibility: hidden—— 它占布局空间,会导致表格底部留白 - 千万别用
.remove()删除节点 —— Layui 内部事件绑定依赖该 DOM,删了翻页按钮就失效 - 每次
table.reload()后分页栏会重建,所以done里要重复执行隐藏逻辑,或改用全局 CSS
怎么隐藏分页栏右侧的「共 N 条」统计文字
Layui 没提供开关,但可通过 CSS 精准控制:.layui-laypage-count 是该文字的类名。
它和「每页显示条数」下拉框、跳转框同级,都位于 .layui-table-page 内。如果已用 limits: [] 隐藏了下拉框,.layui-laypage-count 会左移贴着页码,这是正常行为。
-
.layui-laypage-count { display: none !important; }→ 彻底隐藏统计文字 - 避免只隐藏父容器(如
.layui-table-page)后又单独显示它——容易因优先级冲突失效 - 导出 Excel 或打印时,这个隐藏不影响数据,因为统计文字纯属 UI 层面
layout 控制是否生成,一个靠 limits 长度触发渲染,一个靠 CSS 类名精准压制。混用容易互相干扰,尤其是 reload 后状态不同步——动手前先想清楚,你要藏的是“结构”还是“皮肤”。











