去掉 layout 中的 skip 项即可隐藏跳转页码输入框,因为 skip 是 Layui 分页组件中控制该输入框渲染的纯前端逻辑开关,不存在则 DOM 不生成,避免 CSS 隐藏或 DOM 操作带来的副作用。
layui table 如何禁用分页栏的跳转页码输入框
直接控制 page 配置里的 layout,去掉 skip 项即可隐藏“到第几页”输入框。这是最干净、无副作用的做法,不涉及 css 隐藏或 dom 操作。
为什么 layout 中去掉 skip 就能生效
Layui 的分页组件会根据 layout 数组顺序渲染对应模块。其中 skip 是独立控制跳转输入框的开关,不是样式类名或可选文字——它不存在,DOM 就不会生成。不像 count 或 limit 那样依赖后端返回值,skip 是纯前端渲染逻辑开关。
-
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']→ 显示输入框 -
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh']→ 输入框彻底不渲染 - 即使保留
limits或开启limits,只要没skip,输入框就不会出现
常见误操作:用 CSS 隐藏 .layui-laypage-skip
有人查 DOM 发现输入框外层有 .layui-laypage-skip 类,于是加 display: none。这会导致两个问题:
- 分页容器高度未重算,左右按钮可能错位或留白
- 如果后续调用
table.reload()且未显式传入page.layout,跳转框会重新出现(因为 reload 默认继承初始化配置,而 CSS 隐藏是全局污染) - 移动端点击空白区域仍可能触发 focus,造成光标闪动
完整配置示例(含兼容性提醒)
在 table.render() 中设置:
table.render({
elem: '#demo',
url: '/api/list',
page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh'], // 不要 skip
limits: [10, 20, 50],
limit: 10
}
});
注意:Layui 2.8+ 支持该写法;若用的是 2.5.x 旧版本,skip 无法通过 layout 移除,必须升级或改用 done 回调 + $('body').on('click', '.layui-laypage-skip input', function(){return false;}) 拦截聚焦——但这是权宜之计,输入框 DOM 仍在,占位和潜在交互冲突没解决。
真正想彻底隐藏,只认 layout 配置。别碰 CSS,也别信“删掉元素”的 jQuery 方案——表格重载时它们都会回来。

















