不能设 page: false,否则表格全量加载、不发 page/limit 参数,服务端分页失效;正确做法是保留 page: true 或 page: {} 配置,仅用 css 隐藏 .layui-table-page 容器,并在 done 回调中执行 $('.layui-table-page').hide()。
不能设 page: false,否则表格会全量加载、不发 page/limit 参数,服务端分页就失效了。正确做法是保留分页配置,只隐藏 dom。
为什么不能用 page: false
这是最常踩的坑:page: false 是彻底关闭分页机制——请求不再携带 page 和 limit,后端收不到分页参数,只能返回全部数据;前端也失去页码状态管理,table.reload() 无法维持当前页。如果你查的是百万级数据,页面直接卡死。
-
page: false→ 无分页请求、无分页切片、无页码状态 -
page: true或page: {}→ 有分页请求 + 默认分页栏 - 目标“有逻辑、无栏” → 只能靠 CSS 隐藏,不动配置
用 CSS 隐藏 .layui-table-page 容器
Layui 渲染后,分页栏固定在表格底部,DOM 类名稳定为 .layui-table-page。直接加样式即可,但时机很重要:
- 全局加
.layui-table-page { display: none !important; }最简单,但可能影响其他表格 - 更稳妥是在
done回调里执行:$('.layui-table-page').hide(),确保 DOM 已渲染完成 - 不要用
visibility: hidden,它仍占布局空间,可能导致表格底部留白
去掉右侧“每页显示条数”下拉框
仅隐藏整个分页栏还不够,有时只想干掉右下角那个 limits 下拉框,保留页码和跳转功能。关键不是设 limit: 10,而是控制 limits 数组:
-
limits: []—— 必须显式为空数组,Layui 才跳过下拉框 DOM 渲染 -
limit: 20—— 设你实际要用的固定值,比如 20 条/页 -
limits: [10]或limits: null无效:前者渲染不可展开的输入框,后者 fallback 到默认[10,20,30,40,50] - 隐藏后如需动态改条数,用
table.reload('yourTableId', { limit: 50 }),别重建实例
真正容易被忽略的点:Layui 不支持运行时开关下拉框,limits: [] 必须在初始 render() 时传入;reload 时再传 limits: [] 不生效。另外,.layui-table-page 被 hide 后,“共 N 条”文字会左移,这是正常表现,不是错位。











