layui分页栏默认不渲染,page必须显式设为true或完整对象(如page:{layout:['count','prev','page','next','limit','skip']}),否则即使配置url、cols、limits也无效;服务端需返回根级count字段(数字类型),否则需用response.countname或parsedata映射。

page 必须显式设为 true,不能省略
Layui 表格分页条默认完全不渲染,page 的默认值就是 false。哪怕你配了 url、cols、甚至写了 limits,只要没写 page: true 或等效对象,分页栏就彻底消失。
常见错误写法:page: { limit: 10 } —— 这个对象本身不等于 true,Layui 会直接忽略分页逻辑。
- 正确写法一(前端静态数据):
page: true - 正确写法二(服务端分页且需定制布局):
page: { layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] } - 如果只写
page: {},效果等同于false,不会显示任何分页元素
服务端响应必须带根级 count 字段,且类型是 number
初次加载时,Layui 会解析接口返回体,只认顶层的 count 和 data 两个 key。如果后端返回的是 { code: 0, data: { list: [...], total: 200 } },Layui 找不到 count,就会放弃分页渲染,连分页栏都不画。
检查方法:打开浏览器 Network 面板,看响应体里有没有 count,它的值是不是数字(不是字符串 "200")。
- 后端字段名是
total?加配置:response: { countName: 'total' } - count 嵌套在深层对象里?必须用
parseData提取:parseData: res => ({ count: res.data.total, data: res.data.list }) -
parseData函数里漏掉count,分页栏照样不出现——Layui 靠它算总页数,缺了就当没分页
tab 页签或 layer 弹窗中分页栏被隐藏或错位
初次加载时分页栏“存在但看不见”,大概率是 DOM 渲染时机问题:tab 非激活态、layer 内容用 .html() 插入、或容器高度未正确计算,导致 .layui-table-page 被挤出可视区域或高度塌陷。
典型现象:表格内容正常,但底部空空如也;F12 查看发现 .layui-table-page 元素存在但位置异常。
- tabs 场景:切换到该 tab 后,手动触发一次重绘:
$(".layui-table-box").css("height", "auto")或调用table.resize() - layer 弹窗场景:不要用
content: $("#xxx").html(),改用content: $("#xxx")直接传 DOM 节点,避免事件和样式丢失 - 通用兜底:给分页容器加样式修复定位:
.layui-table-page { position: absolute; bottom: 0; width: 100%; }
请求没带上 page/limit 参数,后端返回全量数据
分页栏虽然渲染出来了,但点击跳页没反应,或始终只显示第一页数据——本质是请求参数压根没发出去,后端收不到 page 和 limit,只能返回全部数据,Layui 前端截取后也看不出变化。
原因常出现在用了 where 或自定义 contentType 时,Layui 的自动拼参机制被破坏。
- 检查 Network 中实际请求 URL,确认是否含
?page=1&limit=10类似参数 -
where必须是对象,不能是字符串:where: { status: 1 }✅,where: "status=1"❌ - 禁用
contentType: 'application/json'—— 它会让page/limit无法拼到 query string,而 JSON body 又没包含它们 - 后端必须依据请求参数做真实分页查询,不能查全量再前端 slice











