最可能原因是page未显式设为true或对象;layui默认page:false,不渲染分页栏,需检查elements中是否存在.layui-table-page,且确保请求含page/limit参数、响应含根级数字count字段。

page 配置没开,分页栏压根不渲染
最可能的原因是 page 没显式设为 true 或对象。Layui 表格默认 page: false,哪怕写了 url 和 cols,只要没写 page: true,分页 DOM 就不会生成,自然点不了、也看不到。
检查方法:打开浏览器 Elements 面板,搜 .layui-table-page —— 找不到就说明配置没生效。
-
page: true是最简写法,适合前端静态数据分页 - 服务端分页建议写成对象:
page: { layout: ['count', 'prev', 'page', 'next', 'limit'] } - 别依赖“应该会自动开”,Layui 不做任何隐式启用
请求没带 page/limit 参数,后端收不到分页指令
分页栏显示正常,但点击后数据不变或始终是第一页,大概率是请求 URL 里压根没出现 page=2&limit=10 这类参数。Layui 默认靠 query string 传参,一旦被干扰就会失效。
检查方法:打开 Network → XHR → 点击下一页,看请求 URL 是否含 page 和 limit。
- 如果用了
where,确保它是对象(如where: { status: 1 }),不是字符串 - 绝对避免手动设置
contentType: 'application/json'——这会让page/limit被丢进 body,而 Layui 只往 query string 塞参数 - 后端必须实际读取这两个参数做数据库分页,不能只查全量再前端截取
后端返回结构不匹配,count 找不到或类型不对
接口返回了数据,但分页栏消失、总页数为 0、或者翻页后空白,问题往往出在响应体结构上。Layui 默认只认根级的 count(数字)和 data 字段。
常见错误返回:{ code: 0, result: { count: 120, list: [] } } —— count 不在根级,Layui 直接放弃分页逻辑。
-
count必须是数字类型,"120"(字符串)会导致分页栏不渲染 - 用
parseData手动提取:parseData: function(res) { return { count: res.result.count, data: res.result.list }; } -
parseData里必须返回count,缺了它 Layui 算不出总页数,整个分页控件就瘫痪
弹层、选项卡或隐藏容器中渲染,事件或尺寸异常
在 layer.open() 弹层里用 content: $('#xxx').html() 插入表格,会导致分页按钮点击无反应——html() 只复制 HTML 字符串,不带事件监听器。
在 Tabs 选项卡中初始化表格时,未激活的 tab 内容不可见,.layui-table-box 高度计算异常,也会导致分页栏错位或不显示。
- 弹层中改用
content: $('#xxx')(传 jQuery 对象),保留原有 DOM 和事件绑定 - 或在
success回调里重新调用table.render(),确保初始化发生在 layer 内部上下文 - Tabs 中可加一句:
$(".layui-table-box").css("height", "auto")或触发重绘











