Layui.laypage配合AJAX实现局部刷新需在jump回调中手动发起请求拉取数据并更新容器，清空目标容器后插入HTML或渲染JSON，同时重初始化layui组件；table.render分页应接管数据源并显式调用render而非reload。
layui.laypage 怎么配合 AJAX 实现局部刷新
laypage 本身不处理数据加载，只负责生成分页 DOM；所谓“局部刷新”，本质是点击页码时用 $.get() 或 $.post() 拉新数据，再把结果塞进目标容器（比如 #list-container），而不是整页跳转或 location.reload()。
常见错误是直接给 laypage 绑定 jump 回调后啥也不做，页面没反应——因为 laypage 不会自动发请求、也不会自动更新内容区。
- 必须在
jump回调里手动发起 AJAX 请求，传入当前页码curr和每页条数limit - 接口返回的应是纯 HTML 片段（不含
<html><body>）或 JSON 数据；若返回 JSON，需用 JS 拼 DOM 或调用template渲染 - 插入前清空容器：
$('#list-container').empty().html(data)，避免残留旧内容 - 若新内容含 layui 表单、按钮等组件，需手动触发重渲染：
layui.form().render()、layui.table.init()等
table.render 分页下如何避免 reload 整表重刷
用 table.render() 初始化表格并开启 page: true 后，别碰 table.reload() 做“局部刷新”——它一定会销毁重建整个 <table> DOM，滚动位置丢失、事件监听器清空、已展开的行全部收起。
真要局部更新某一页的数据，唯一可控路径是：接管数据源 + 手动调 table.render()。
- 初始化时必须设
id（如id: 'userTable'），后续所有操作才可定位 - 在
page: { jump: function(obj, first) { ... } }的jump回调中拦截翻页动作 - 首次加载（
first === true）走正常流程；非首次时，用$.get('/api/users?page=' + obj.curr + '&limit=' + obj.limit)拉数据 - 拿到数据后，调
table.render({ elem: '#userTable', data: res.data, page: { curr: obj.curr } })—— 注意必须显式传page.curr，否则默认回到第 1 页 - 别漏掉同步更新排序状态：若用户点了表头排序，
obj里会有sort和order字段，得透传给后端并体现在新请求参数中
点击菜单切换 tab 时怎么只刷新当前 tab 内容
左侧菜单点击触发 tab 切换，但默认 tab 不刷新内容；想实现“点一次菜单，只刷新对应 tab 的 iframe”，核心是精准控制 iframe 的 src 重赋值，而非靠 location.reload() 或 contentWindow.location.reload()。
后者在跨域 iframe 下必然报 Blocked a frame with origin ... from accessing a cross-origin frame 错误，而前者会刷新整个父页面。
- 每个菜单项带
data-url和data-id，例如：<dd data-url="order/list.html" data-id="order-list">订单管理</dd> - 监听
element.on('nav(left-menu)', ...)，拿到data-id后查对应 tab 项：$('.layui-tab-title .layui-this').attr('lay-id') - 再用该
lay-id查 iframe：$('iframe[lay-id="' + id + '"]')（注意不是data-frameid，layui 官方 tab 用的是lay-id属性） - 执行
iframe.src = url + '?t=' + Date.now()，加时间戳防缓存；即使 URL 不变，重赋值也会触发浏览器重新请求 - 加防重复逻辑：缓存上一个激活的
lay-id，相同则 return，避免用户连点两次导致接口被调两次
为什么 table.cache 改完不 render 就没效果
table.cache 是只读缓存快照，改它只是改了内存里的数组，不会触发 DOM 更新。Layui 表格的视图层和数据层是分离的——cache 存原始数据，render() 才真正驱动 DOM 生成。
这个点最容易被忽略：有人以为 table.cache['userTable'][0].status = 'done' 后表格就会立刻变，结果发现 UI 完全没反应。
- 修改
table.cache后，必须调table.render({ elem: '#userTable', data: newData })，且newData必须是当前页的完整数据数组 - 如果用了远程分页（
url配置），table.cache只存当前页数据；要改某一行，你得自己维护一份全量数据副本，否则翻页后就找不回那条记录 - 别用
table.reload()来“补救”——它会丢掉你刚改的cache，重新拉一遍接口，等于白改 - 若表格启用了排序或筛选，
newData必须是已按当前规则处理过的数据，否则视图会和状态错位
