应使用 layout: ['prev', 'page', 'next'] 并配合 CSS 隐藏页码元素,因 'page' 是事件绑定的核心容器,缺失会导致翻页逻辑失效;仅留 ['prev', 'next'] 会使按钮失去上下文而无法响应。

layui分页如何只保留「上一页」「下一页」按钮
直接删掉 page.layout 里除 'prev' 和 'next' 外的所有项,但必须保留 'page' —— 否则页码区域会消失,导致分页逻辑异常或按钮失效。
-
page.layout是控制分页栏组件可见性的唯一开关,它不决定功能是否启用,只决定 UI 是否渲染 - 常见错误写法:
layout: ['prev', 'next']→ 页面只剩两个按钮,点击无响应,因为缺失'page'导致 laypage 内部找不到页码容器 - 正确写法:
layout: ['prev', 'page', 'next']→ 「上一页」「下一页」可见,中间页码数字区域仍存在但为空(Layui 默认不渲染具体页码数字,仅留占位) - 如果连页码占位都不想要,不能靠 layout 控制,得用 CSS 隐藏:
.layui-laypage .layui-laypage-spr, .layui-laypage em, .layui-laypage a:not(.layui-laypage-prev):not(.layui-laypage-next) { display: none !important; }
为什么去掉 'page' 后点击没反应
'page' 不是“显示页码数字”的开关,而是 laypage 组件的**核心挂载点**。Layui 在初始化时,会把事件监听器、当前页状态、翻页逻辑全部绑定到 .layui-laypage-page 这个内部容器上。一旦 'page' 被移出 layout,这个容器就不会生成,prev 和 next 按钮就失去了上下文,变成纯静态 DOM。
- 现象:按钮可见,但点击后
curr不变,done回调不触发,网络请求也不发 - 验证方式:在浏览器控制台执行
layui.$('.layui-laypage-page').length,返回0即确认缺失 - 修复只需加回
'page',无需其他配置;不需要显式写limits或count
隐藏页码数字但保留翻页逻辑的稳妥做法
真需求往往是「只要左右箭头,不要中间一堆数字和省略号」,这时候不该动 layout,而该用 CSS 精准隐藏视觉元素,同时保留 DOM 结构和事件能力。
- 隐藏所有页码按钮(不含 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-em是当前页高亮样式类,也得一并 hide - 隐藏省略号:
.layui-laypage .layui-laypage-spr - 必须加
!important,因为 Layui 渲染时会注入内联style,普通 CSS 权重不够 - 避免用
display: none直接干掉整个.layui-laypage-page,否则prev/next会失去绑定目标
额外注意:prev/next 文本和禁用态
默认「上一页」「下一页」文本不可见时,往往是因为当前页是第一页或最后一页,按钮被 Layui 自动加上了 layui-disabled 类并设为 opacity: .5。这不是 bug,是正常交互反馈。
- 想让按钮始终可用(比如配合前端全量数据分页),需手动控制
curr和count,并在prev/next回调里自行计算跳转逻辑 - 修改按钮文字用
prev: '<'、next: '>'即可,不依赖 layout - 若按钮完全不可见,先检查容器宽度是否过窄导致溢出隐藏(
.layui-laypage默认white-space: nowrap)
layout: ['prev', 'page', 'next'] + 一行 CSS 隐藏中间节点。其余全是干扰项。


















