不能去掉'page',因其是Layui分页事件绑定的核心容器,移除后prev/next按钮将失去上下文而点击无响应;正确做法是保留layout:['prev','page','next']并用CSS隐藏页码数字。

直接删掉 layout 里的 'page' 是行不通的——按钮会失效,不是“只留文字”,而是整个翻页逻辑崩了。
为什么不能去掉 'page'
'page' 不是“显示页码数字”的开关,而是 Layui 分页组件的事件绑定容器。它内部承载了当前页状态、点击响应、done 回调触发等核心逻辑。一旦移除,'prev' 和 'next' 就变成纯静态 DOM,点击后 curr 不变、done 不执行、接口也不发。
- 现象:按钮可见,但点击无任何反应
- 验证方式:控制台执行
layui.$('.layui-laypage-page').length,返回0即确认缺失 - 修复只需加回
'page',无需额外配置
真正想隐藏页码数字,该用 CSS
目标是“保留翻页能力,只藏掉中间那些 1 2 3 … 和省略号”,就得靠样式精准隐藏,而不是动结构。
- 隐藏所有页码链接(不含 prev/next):
.layui-laypage a.layui-laypage-em, .layui-laypage a:not(.layui-laypage-prev):not(.layui-laypage-next):not(.layui-laypage-more) - 隐藏省略号:
.layui-laypage .layui-laypage-spr - 必须加
!important,因为 Layui 渲染时会注入内联 style,普通权重压不住 - 切勿对
.layui-laypage-page直接display: none,否则事件绑定目标消失
如果连占位都不要,layout 还得保留 'page'
有人希望分页栏只剩「上一页」「下一页」两个文字按钮,中间完全空白。这时候仍需 layout: ['prev', 'page', 'next'],再配合 CSS 把 .layui-laypage-page 的高度设为 0、内边距清零、子元素隐藏——DOM 结构还在,事件照常工作,视觉上就是纯文字按钮。
- 错误写法:
layout: ['prev', 'next']→ 按钮不可点 - 正确路径:保留
'page'+ CSS 隐藏其内容 + 可选微调外边距对齐 - 注意:prev/next 文本本身支持 HTML,如需加粗可用
prev: '上一页',但确保没开启 XSS 过滤
最易忽略的一点:CSS 隐藏后,要检查是否因父容器 overflow: hidden 或宽度不足导致跳转框、文字被裁切——Layui 对窄容器会自动收缩甚至隐藏部分控件,这不是配置问题,是布局挤压所致。










