table.reload()不能更新合计行,因其不重算totalRow逻辑;需手动修改table.config.totalRow后调用table.renderTotal(表格ID)刷新。
直接改 table.config.totalrow 并触发重绘,不是靠重新渲染整个表格。
为什么 table.reload() 不能更新合计行
很多人以为调用 table.reload() 就能刷新底部合计,结果发现 totalRow 没变——因为 reload() 默认只读取 data 或远程数据,不自动重算合计逻辑,也不合并你手动设置的 totalRow 配置。
-
totalRow: true只在初始化时生效,后续改配置不会自动同步 - 即使你改了
table.config.totalRow对象,Layui 也不会主动重绘底部行 - 合计行的 DOM 是静态生成的,没绑定响应式更新机制
正确做法:手动更新 totalRow + 调用 table.renderTotal()
Layui 2.8+ 内置了 table.renderTotal() 方法(注意不是公开文档里的 API,是源码暴露的实用函数),它专为动态刷新合计行设计。前提是你的表格实例已存在且启用了 totalRow。
- 先确保初始化时设了
totalRow: true,否则renderTotal()无效果 - 修改
table.config.totalRow对象的对应字段,比如table.config.totalRow[0].price = 12345 - 再调用
table.renderTotal(table.config.id),传入表格 ID 字符串 - 如果用的是函数式合计(如
totalRow: [{ field: 'price', custom: function(){...} }]),需确保函数返回值已更新,再调renderTotal()
示例:
const ins = table.render({
elem: '#demo',
totalRow: true,
cols: [[{field:'price', totalRowText: '合计'}]],
data: [...]
});
// 后续更新合计值
ins.config.totalRow[0].price = 89200;
table.renderTotal('demo'); // 注意:传的是 render 时指定的 id,不是 elem 选择器
兼容旧版(Layui < 2.8)或自定义合计逻辑
低于 2.8 的版本没有 renderTotal(),得手动操作 DOM;或者你压根没开 totalRow: true,而是自己加了个 <div class="layui-table-total"> ——这时别碰 config.totalRow,直接改 DOM 更稳。
- 用
$(ins.elem).next('.layui-table-total')定位合计容器(注意层级,可能被分页栏遮挡) - 避免用
html()全量重写,优先用find()找到对应单元格再text()更新,减少重排 - 如果表格启用了
page: true,合计行默认在分页上方,DOM 位置不固定,建议加个唯一 class 方便定位 - 记得在数据变更后、表格重绘前更新,否则可能被下一次
reload()覆盖
最常被忽略的一点:合计行的字段名必须和列 field 完全一致,大小写、下划线都不能错;renderTotal() 不校验字段是否存在,填错就静默失效。


















