layui laypage分页必须返回含count(数值型)和data字段的json,count不可由data.length推算;若后端字段不匹配,需用parse函数映射,且url参数名须与request配置严格一致。

后端返回的 JSON 结构必须匹配 layui 的 data 字段约定
layui 的 laypage 组件本身不直接请求接口,它依赖你用 laypage.render() 配合 request 和 parse 选项来对接后端。关键不是“layui 要什么格式”,而是你告诉它“总条数在哪”“当前页数据在哪”——它靠 parse 函数从响应里抠出来。
最常见错误是后端返回了 { "code": 0, "msg": "", "data": [...] },但没提供 count(总记录数),导致分页器无法计算页码数,只显示“第 1 页 / 共 0 页”。
- 必须返回一个包含
count字段的 JSON 对象(数值类型,不能是字符串) -
data字段可以是数组(当前页数据列表),也可以是对象(需在parse中提取) - 推荐结构:
{"code":0,"msg":"","count":123,"data":[{"id":1,"name":"a"}]} - 如果后端习惯把列表放在
list或items下,必须用parse映射过去
laypage.render() 中的 parse 怎么写才能对上后端字段
当后端响应结构不标准时,parse 是唯一可靠解法。它接收原始响应对象,返回一个固定结构的对象给 laypage 内部使用。
例如后端返回:{"status":true,"total":200,"rows":[{"uid":1},{"uid":2}]},你需要这样写:
laypage.render({
elem: 'demo',
count: 1000,
curr: 1,
limits: [10,20,50],
request: { page: 'currentPage', limit: 'pageSize' },
parse: function(res) {
return {
count: res.total, // 总数,必填
data: res.rows // 当前页数据数组,必填
};
}
});
-
parse函数必须返回含count和data两个 key 的对象 - 返回的
count值会被 laypage 用于计算总页数,务必确保是准确整数 - 如果后端没传总数(比如只给了当前页数据长度),你不能在这里硬写
res.data.length * res.currentPage——这会出错,应让后端补全count
为什么 count 不能从 data.length 推算
因为分页器需要知道“总共多少页”,而 data.length 只反映当前页条数(比如每页 10 条,最后一页可能只有 3 条)。如果后端不返回真实总数,laypage 会误判页码范围,翻页时可能空白或重复。
- 前端永远无法仅凭单页数据反推总数,这是分页逻辑的基本前提
- 某些开发会尝试在
parse里发二次请求取总数——不可行,laypage 渲染和跳页都依赖同步返回的count - 如果后端确实无法提供总数(如 ES 深度分页场景),需改用“下一页游标”模式,此时 laypage 不适用,应换
loadmore或自定义加载
接口 URL 参数名要和 request 配置严格一致
layui 默认用 page 和 limit 传参,但很多后端用 pageNum/pageSize 或 offset/limit。必须显式声明,否则参数根本不会发过去。
- 写成
request: { page: 'pageNum', limit: 'pageSize' }后,请求 URL 就会是?pageNum=2&pageSize=10 - 若后端要求
offset=10&limit=10,得手动算:request: { page: 'offset', limit: 'limit' },再在jump回调里转换(offset = (curr - 1) * limit) - 参数名大小写敏感,
PageNum≠pageNum
后端字段命名自由,但 count 和 data 的语义责任必须由前端通过 parse 显式承接——这里最容易漏掉 count 或类型写错(比如传了字符串 "123")。











