layui分页需手动ajax加载数据并在jump回调中清空旧表格、重载新数据,count必须动态获取自后端响应,不可写死;laypage无自动请求能力,与table模块分页机制不同,不可混用。

layui 分页实现异步加载,核心不是靠 laypage 自己“拉数据”,而是你手动用 AJAX 拿到数据后,再调用 showRecord() 或类似函数渲染表格,同时让 laypage.render() 的 jump 回调去触发它——laypage 只管翻页逻辑和 UI,数据加载和 DOM 更新得你自己写。
laypage 的 jump 回调里必须手动清空并重载数据
很多人以为配置好 url 就能自动请求,其实 laypage(非 table 模块)不内置 AJAX 行为。它的 jump 函数是唯一可编程入口,必须在这里做两件事:
- 首次加载时(
first === true),直接调用一次数据加载函数,比如showRecord(1, 10) - 非首次时(
!first),先$('tbody').empty()清空旧表格,再用obj.curr和obj.limit调用相同加载函数 - 漏掉清空步骤会导致新旧数据叠加,表格行数越翻越多
后端返回的 total 必须准确,且不能写死在 JS 里
laypage.render() 的 count 参数决定总页数,它必须是真实总数,不是估算值。常见错误是把 count: ${total} 写成服务端模板变量,但该变量只在首屏渲染时计算一次,后续条件查询或筛选后没更新,导致分页器显示页数错乱。
- 正确做法:每次 AJAX 请求成功后,从响应体中提取真实
count,比如res.count或res.data.totalElements - 然后在
jump中动态传入:把laypage.render()包进一个函数,每次重新 render,并传入最新count - 如果用的是 Spring Boot + Pageable,后端应返回标准结构:
{"code":0,"msg":"","count":1234,"data":[...]}
别混淆 laypage 和 table 的分页机制
layui 有两个常用分页路径:laypage(纯分页条)和 table.render({ url: 'xxx' })(自带 AJAX 的表格组件)。它们底层逻辑完全不同:
-
laypage是轻量级分页控件,无数据绑定能力,适合自定义表格或非 table 场景(如列表、卡片流) -
table模块开启url后,会自动拼参(page、limit)、自动解析count和data,无需手写jump - 混用两者(比如在
table外又套一层laypage)会导致参数冲突、重复请求
最易被忽略的一点:laypage 的 curr 默认是 1,但如果你在 URL 里带了 ?page=3,而没在初始化时读取并传给 curr,用户刷新页面就会回到第 1 页——这个状态需要你主动从地址栏或 localStorage 恢复。











