layui分页怎么去掉“跳到第几页”的输入框-Layui教程-PHP中文网

去掉 layout 中的 skip 项即可彻底隐藏“跳到第几页”输入框，因为 skip 是 Layui 分页渲染逻辑开关而非 CSS 类名，未加入 layout 数组则 DOM 根本不生成，无副作用且 reload 不复现。

layui分页怎么去掉“跳到第几页”的输入框

去掉 layout 中的 skip 项即可彻底隐藏输入框

“跳到第几页”输入框由 skip 控制，它不是 CSS 类名，而是 Layui 分页渲染逻辑的开关。只要初始化时没把它放进 page.layout 数组，DOM 就根本不会生成——没有副作用，也不用担心 reload 后复现。

常见错误写法：page: { layout: ['count', 'prev', 'page', 'next', 'limit'] }（漏了 skip，但本意是想隐藏，其实已经生效）；误以为要加 skip: false 或删掉 jump ——这些字段都不存在，Layui 不识别。

layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh'] → 输入框不出现
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] → 输入框出现
哪怕你同时开了 limits 或用了自定义主题，只要没 skip，输入框就绝不会渲染

别用 CSS 隐藏 .layui-laypage-skip

有人查 DOM 发现外层有 .layui-laypage-skip 类，就加 display: none，结果出问题：分页容器高度没重算，左右按钮错位；table.reload() 后输入框又冒出来（因为 reload 默认沿用原始配置，CSS 是全局污染）；移动端点空白还触发 focus，光标乱闪。

本质是把“不渲染”降级成“渲染再藏”，多此一举还埋坑。Layui 的 skip 是纯前端开关，不是样式钩子——它不在数组里，连 DOM 节点都不会创建。

为什么加了 skip 还不显示？先查这三个地方

如果你本意是开启跳转框却没看到，大概率不是配置错，而是被环境压制了：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

表格容器宽度太窄，Layui 自动折叠右侧区域（尤其父容器 overflow: hidden 或小屏下）
page.limit 设得过大（比如 1000），而总数据量 ≤ limit，导致总页数 ≤ 1，Layui 认为无需跳转，直接隐藏 skip 区域
自定义 CSS 覆盖了 .layui-laypage-jump 或其子元素，比如写了 .layui-laypage-skip { display: none }

验证方法：打开开发者工具，搜

。没这个节点 → 配置没生效；有但看不见 → 查宽度和 CSS。想换文字或合并按钮？不能改 skip，但可以换 jump
jump 字段才是控制“跳至”二字的文本，比如 jump: '前往' 或 jump: 'Go to'。它只影响文字，不影响输入框行为或校验逻辑。
想把输入框+按钮换成一个自定义按钮？Layui 不支持模板替换，但可以在 done 回调里手动插入：obj.elem.nextElementSibling 找到分页容器，appendChild 一个带 input 和 button 的 div，再绑定 click 事件调用 table.reload({ page: { curr: Number(input.value) } })。注意每次 reload 都会重建分页 DOM，得加防重复插入逻辑（比如检查是否已有 custom-skip class）。
真正容易被忽略的是：Layui 的分页 UI 和分页逻辑是解耦的。skip 控制 UI 是否存在，page.curr 控制逻辑跳转——你可以不要输入框，但依然能用 table.reload({ page: { curr: 5 } }) 跳到第 5 页。