去掉 layout 中的 'skip' 项即可彻底隐藏“跳往第几页”输入框,dom 不会生成该元素;若仅需隐藏输入框而保留“跳至”文字,layui 无原生支持,强行 dom 操作风险高且 reload 后需重复处理,推荐移除 'skip' 并自定义跳转控件。

去掉 layout 中的 skip 项即可彻底隐藏
“跳往第几页”输入框在 Layui 表格中由 skip 这个 layout 项控制,它不是样式类,而是纯前端渲染开关。只要初始化时的 page.layout 数组里不包含 'skip',DOM 就根本不会生成,没有副作用,也不用写 CSS 隐藏。
常见错误配置:
-
page: { layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] }→ 输入框出现 -
page: { layout: ['count', 'prev', 'page', 'next', 'limit'] }→ 输入框完全不渲染
注意:skip 和 jump 是两个独立项:jump 控制右侧“跳至”文字+输入框组合(需配合 skip 才生效),而单独加 'jump' 但没 'skip' 不会显示任何跳转区域。
别用 CSS 隐藏 .layui-laypage-skip
有人查 DOM 发现外层有 .layui-laypage-skip 类,就加 display: none,这会埋坑:
- 分页容器高度未重算,导致左右按钮错位或底部留白
- 调用
table.reload()时若未显式传入page.layout,会按初始配置还原,skip区域重新出现 - 移动端点击空白区域仍可能触发
input的 focus,光标乱闪
这类隐藏是“伪隐藏”,本质是污染全局样式,且不可靠。
如果只想隐藏输入框、保留“跳至”文字怎么办
Layui 没提供只留文字、删输入框的配置。强行实现只能靠 DOM 操作,但风险高:
- 必须在
table.render()的done回调里操作,否则元素还没生成 - 得先查到
.layui-laypage-skip input,再input.style.display = 'none' - 还要手动调整外层
.layui-laypage-skip的 padding 或 width,否则文字挤在一起 - 每次
reload都会重建该区域,需重复执行,容易漏或重复绑定
不推荐走这条路。真有定制需求,建议直接去掉 skip,用其他方式(比如顶部加自定义跳转控件)替代。
确认是否生效:看 DOM 里有没有 .layui-laypage-skip
最直接的验证方式是打开开发者工具,检查分页容器内是否存在 <div class="layui-laypage-skip">。没有这个元素,说明配置已生效;如果有但看不见,问题一定出在 CSS 或容器宽度上(比如父级 <code>overflow: hidden 把它裁掉了)。
另外注意:当 page.limit 过大导致总页数 ≤ 1 时,Layui 会自动隐藏整个跳转区域——这不是 bug,是它的默认行为,此时即使写了 'skip' 也不会显示。











