合计行不更新是因为 reload 未触发 setTotalRow();需传 data 参数强制重绘,或手动计算并更新 DOM。
合计行不更新,是因为重载没触发 setTotalRow()
layui 表格的合计行(totalrow)只在初始化或调用 renderdata() 时由内部方法 settotalrow() 计算一次。直接调用 table.reload() 若未强制刷新数据源或未重新走完整渲染流程,合计行 dom 就不会重绘——哪怕你传了新数据,它也照旧显示老值。
table.reload() 必须带 data 参数才能重算合计行
默认情况下 table.reload('id', { where: {} }) 仍会从服务端拉数据,但若后端返回的数据结构没变、且 layui 缓存未失效,它可能跳过 setTotalRow() 调用。真正可靠的方式是绕过请求,用本地数据驱动重绘:
- 确保 reload 时传入
data字段,例如:table.reload('test', { data: newDataArray, page: { curr: 1 } }) - 如果必须走接口,就在 success 回调里手动调用
table.cache['test'] = res.data,再执行table.reload('test', { data: res.data }) - 不要只依赖
where: {}清空条件——那只是清请求参数,不等于清合计逻辑
手动清空合计行 DOM 再重绘更可控
当你要“先清空再加载”,又不想等接口响应,最稳的做法是提前干掉合计行节点,避免视觉残留:
- 用
$(table.elem).next('.layui-table-total').remove()直接删掉合计行容器(Layui 2.8+ 合计行固定加在 table 后面) - 再调
table.reload('test', { data: [] }),空数据会触发重绘并隐藏合计行;后续再 reload 带真实数据时,合计行自然重建 - 注意:别用
table.clearCache()或删table.cache对象——这会影响分页、选中状态等其他功能,得不偿失
编辑后更新合计行,别 reload 整个表格
如果只是单元格编辑(edit(filter)),reload 成本高且不必要。直接算和、改 DOM 更轻量:
- 用
table.cache['test']拿当前页全部行数据(不是table.config.data) - 遍历累加目标字段:
const sum = table.cache['test'].reduce((a, r) => a + (parseFloat(r.price) || 0), 0) - 找到合计行对应 td:
$(table.elem).next('.layui-table-total').find('td[data-field="price"]').text(sum.toFixed(2)) - 这个操作不触发重绘、不发请求,毫秒级完成
renderData 流程里——想让它动,就得让这个流程跑起来,而不是只动数据或只动 DOM。











