layui table reloadData 后页码默认重置为第一页,需手动传入 page: { curr: n } 才能维持当前页;可用封装的 reloadWithPage 方法自动携带当前页码。
layui table reloadData 后页码重置为第一页?
默认会重置。reloaddata 是 layui 2.8+ 新增的轻量刷新方法,它不触发完整重载流程,也不保留当前分页状态——哪怕你只改了数据,page 也会被悄悄设回 1。
必须手动传入 page 参数才能维持当前页
这是最直接有效的解法。Layui 的 reloadData 支持透传任意配置项,其中 page 是关键:
- 先用
table.config拿到当前实例的页码:table.config[‘id’].page.curr - 调用
reloadData时显式带上page: { curr: n } - 注意:不能只传
curr,必须是完整对象{ curr: n },否则无效
示例:
const ins = table.config['userTable'];
table.reloadData('userTable', {
data: newData,
page: { curr: ins.page.curr }
});
用 reload 替代 reloadData?小心副作用
如果数据量小、接口快,reload 确实能自动保持页码,但它会重新请求后端、重走全部初始化逻辑(包括列定义、工具栏、事件绑定等):
- 重复绑定会导致事件多次触发(比如点击行重复弹窗)
- 若表格依赖动态生成的列或条件渲染,
reload可能破坏已有状态 - 某些自定义
done回调里用了闭包变量,reload后这些变量可能已失效
所以除非你确认没副作用,否则别为了省一行代码换用 reload。
更稳妥的做法:封装一个带页码记忆的 reload helper
避免每次手写 table.config[...].page.curr,容易漏或写错路径:
- 把
table.config[id]提前缓存,避免重复查找 - 检查
page是否存在,防止未分页表格报错 - 允许传入额外参数,比如
where或data,保持灵活性
简版示例:
function reloadWithPage(id, opts = {}) {
const config = table.config[id];
if (!config) return;
const curr = config.page?.curr || 1;
table.reloadData(id, {
page: { curr },
...opts
});
}
调用:reloadWithPage('userTable', { data: newData })
页码不是“自动继承”的属性,而是需要你主动告诉 Layui:“我要留在这一页”。很多人卡在这儿,是因为盯着 reloadData 文档看参数列表,却忽略了 page 这个可选但关键的透传字段。










