最直接的办法是将 page.layout 设为空数组:layout: []。Layui 会严格按此配置不生成任何分页 DOM,但分页请求(page=1&limit=10)照常发送,后端仍需按分页逻辑返回数据;done 回调中的 curr 和 count 参数依然有效,仅 UI 不显示。

page.layout 里只留空数组就行
想让分页栏存在但不显示任何文字(包括「共 xx 条」「上一页」「1 2 3」「跳转」等),最直接的办法是把 page.layout 设为空数组:layout: []。Layui 的分页组件会严格按这个数组渲染对应模块,一个都不写,就什么 DOM 都不生成——不是隐藏,是压根不创建。
常见错误是写成 layout: [''] 或 layout: null,这会导致整个分页栏渲染失败或报错;也有人试图用 CSS 把所有文字设为 visibility: hidden,但按钮、输入框的占位和交互逻辑还在,点击仍会触发翻页。
-
page: { layout: [] }→ 分页栏 DOM 完全不出现,但分页请求照常发送(page=1&limit=10),后端仍需按分页逻辑返回数据 - 如果连分页逻辑都不要,才该用
page: false,但它会禁掉所有分页参数,后端必须返回全量数据 - 注意:
done回调里的curr和count参数依然有效,只是没地方显示而已
为什么不能靠 CSS 隐藏文字来实现
单纯隐藏文字(比如 .layui-laypage-count, .layui-laypage-page, .layui-laypage-skip)会留下空白容器、错位按钮、不可预测的聚焦行为,尤其在 table.reload() 后容易复现。Layui 的分页 DOM 是动态插入的,CSS 隐藏无法阻止它生成结构,反而可能因高度塌陷导致表格底部留白或滚动异常。
更麻烦的是移动端:即使文字看不见,.layui-laypage-skip input 仍可被点击唤起软键盘,用户根本不知道自己点了啥。
- DOM 还在 → 事件监听器还在 → 点击区域还在 → 行为不可控
- 不同 Layui 版本对类名的封装程度不同,
.layui-laypage-xxx不是稳定 API,CSS 覆盖容易失效 - 真正干净的做法,永远优先走配置项,而不是样式补丁
需要保留分页功能但不想暴露 UI 的典型场景
比如后台管理系统的「导出全部」按钮,背后用的是服务端分页接口,但用户不需要操作分页——此时 layout: [] 刚好满足:请求带 page/limit,后端分批查库,前端拿到所有页数据后合并导出,UI 上完全无感。
- 别忘了配
limits和limit,否则parseData里取不到当前每页条数 - 如果后端返回结构不标准(如
pagination.total),parseData必须显式返回{ data, count },不然curr计算会出错 - 这种用法下,
done回调仍是唯一能拿到完整分页上下文的地方,别依赖res.count直接用——它可能被parseData改过
容易被忽略的兼容性点
Layui 2.5.x 及更早版本不支持空 layout 数组,会直接报错或静默失败。如果你的项目还在用旧版,只能退而求其次:用 layout: ['prev', 'next'] + CSS 隐藏这两个按钮,或者升级到 2.8+。
另外,page: { layout: [] } 和 page: false 在 Network 面板里看起来一样(都带 page/limit 参数),但前者仍走分页流程,后者连参数都不发——调试时务必看请求 URL,而不是只看 UI。


















