最可能的原因是 page 配置未显式启用——layui 表格分页默认关闭(page: false),必须显式设置 page: true 或 page: { layout: [...] },否则分页 dom 不渲染、按钮无响应。

page 配置没开,分页栏压根不渲染
点击下一页没反应,最可能的原因是 page 根本没启用。Layui 表格的分页默认是关闭的——page: false 是硬编码默认值。哪怕你写了 url、cols、limits,只要没显式写 page: true 或 page: { layout: [...] },整个分页 DOM 就不会生成,按钮自然点不了。
检查方法:打开浏览器 Elements 面板,搜 .layui-table-page 或 .layui-laypage,搜不到就说明配置没生效。
-
page必须显式设为true或对象(如{ layout: ['count', 'prev', 'page', 'next'] }),不能省略或依赖“应该会自动开” - 如果用了
limits但没写page,依然无效;limits只影响下拉选项,不开启分页逻辑 - 确认没有拼写错误,比如写成
pages: true或Page: true(大小写敏感)
请求 URL 里没带 page/limit 参数
分页栏显示正常,但点击后数据不变、Network 里看不到新请求,或者请求参数始终是 page=1,大概率是参数根本没发出去。
Layui 默认把 page 和 limit 拼在 query string 里(如 ?page=2&limit=10),一旦被干扰就会失效。
- 检查 Network → XHR → 请求 URL,确认是否含
page=和limit=字段 - 如果用了
where,确保它是对象,比如where: { status: 1 },不是字符串where: "status=1" - 绝对不要手动设置
contentType: 'application/json'——这会让 Layui 把参数塞进 body,而它只往 query string 塞分页参数,后端收不到 - 服务端必须实际读取这两个参数做数据库分页,不能查全量再前端截取
后端返回结构不匹配,count 找不到或类型不对
接口返回了数据,但分页栏消失、总页数为 0、翻页后空白,问题往往出在响应体结构上。Layui 默认只认根级的 count(数字)和 data 字段。
例如后端返回 { code: 0, result: { count: 120, list: [] } },Layui 就找不到 count,直接放弃分页逻辑。
-
count必须是数字类型,"120"(字符串)会导致分页栏不渲染 - 用
parseData手动提取时,必须返回count和data,缺一不可:parseData: function(res) { return { count: res.result.count, data: res.result.list }; } - 如果后端字段名是
total或rows,需配合response配置映射:response: { countName: 'total', dataName: 'rows' }
layer 弹层里用 html() 插入表格,事件绑定丢失
在 layer.open() 里用 content: $('#xxx').html() 渲染表格,会导致分页按钮点击无反应——html() 只复制 HTML 字符串,不带事件监听器,所有 click、change 都丢了。
- 改用
content: $('#xxx')(传 jQuery 对象),保留原有 DOM 和事件绑定 - 或者在
success回调里重新调用table.render(),确保初始化发生在 layer 内部上下文 - 别在弹层打开前就 render 表格,等 layer 完全加载后再初始化
page 就去调接口,或者后端返回了 count 却是字符串——这两处一错,整个分页链路就静默中断,连报错都不会有。











