多个tab独立分页时，每个laypage.render()的elem必须唯一，如pages-tab1、pages-tab2；共用同一elem会导致仅最后一个生效，须为各tab分配独立dom容器并分别初始化。
多个 tab 里各自独立分页，elem 必须唯一
laypage 不支持“同一个容器复用多次”，每个 tab 下的分页必须绑定不同的 DOM 容器。常见错误是所有 tab 都写 elem: 'pages'，结果只渲染出最后一个 tab 的分页，其余空白或错乱。
正确做法是为每个 tab 的分页容器设唯一 ID，比如：pages-tab1、pages-tab2，再在 JS 中分别调用 laypage.render()：
laypage.render({ elem: 'pages-tab1', count: 200, limit: 10, curr: 1, jump: function(obj){ loadTabData('tab1', obj.curr, obj.limit); } });
laypage.render({ elem: 'pages-tab2', count: 150, limit: 10, curr: 1, jump: function(obj){ loadTabData('tab2', obj.curr, obj.limit); } });
- 每个
elem值不能重复，也不能带# -
curr要按 tab 独立维护，别共用一个全局变量 - 如果 tab 是懒加载（点击才初始化），确保 DOM 已插入文档后再调用
render()
jump 回调里必须区分 tab 上下文
点击页码后，jump 函数触发数据重载，但若所有 tab 共享同一回调，容易串数据——比如点 tab2 的第 3 页，却刷新了 tab1 的列表。
推荐方式：把 tab 标识作为闭包变量传入，或从容器元素上提取上下文：
function initTabPage(tabId, total) {
laypage.render({
elem: 'pages-' + tabId,
count: total,
limit: 10,
jump: function(obj, first) {
if (!first) {
// 这里能明确知道是哪个 tab 触发的
fetchData(tabId, obj.curr, obj.limit);
}
}
});
}
- 避免在
jump里直接读取全局currentTab变量，状态易被覆盖 - 后端接口建议带上
tab=xxx参数，方便服务端区分查询逻辑
切换 tab 时要不要销毁分页实例？
laypage 没有提供 destroy() 方法，也不需要手动清理。只要不重复调用 render() 到同一个 elem，旧实例不会干扰新实例。
真正要防的是：用户快速切换 tab，导致多次异步请求并发，返回顺序错乱。这时应在 jump 中加节流或取消上一次请求：
- 用
XMLHttpRequest.abort()或fetch的AbortController - 记录每个 tab 最新的
curr，响应返回时校验是否仍匹配当前页码 - 不要依赖
setTimeout模拟节流，它无法取消已发出的请求
样式冲突：多个分页共存时 CSS 会互相影响吗？
laypage 渲染后生成的类名（如 .layui-laypage、.layui-laypage-curr）是全局的，但结构隔离性足够——每个分页容器下的子节点互不穿透，所以默认不会样式打架。
但如果你写了类似 .layui-laypage a { color: red; } 这种宽泛选择器，就会批量作用于所有分页。安全做法是限定作用域：
.tab1 .layui-laypage a { color: #017bff; }
.tab2 .layui-laypage a { color: #2b8c36; }
- 给每个 tab 容器加 class（如
<div class="tab1"><div id="pages-tab1"></div></div>） - 避免用 ID 选择器覆盖 laypage 内部样式，ID 优先级高且难维护
- 当前页高亮背景靠
.layui-laypage-curr .layui-laypage-em，这个必须加前缀限定
curr 值——比如用户在 tab2 看到第 5 页，切回 tab1 时，tab1 分页仍显示第 5 页（但数据其实是第 1 页），视觉与数据不一致。必须在 tab 显示回调中显式调用 laypage.render() 并传入正确的 curr，或用 laypage.skip() 手动跳转。
