Layui合计行不支持max/min配置,需用footerData手动注入并监听sort/page事件重绘;计算时须过滤空值和非数字,边界情况需兜底处理。
合计行不支持直接配置 max/min,必须手动接管 footer 渲染
layui 的 totalrow: true 只做简单数值累加,对 max、min、avg 等统计逻辑完全不识别。你看到的“合计”文字和数字,本质是框架遍历当前页 table.cache[elemid] 后硬算出来的 sum,没有内置扩展点。想显示最大值或最小值,就得放弃 totalrow,改用 footerdata 手动注入——这不是“配置开关”,而是替换整行 dom 内容。
用 footerData 填充最大值/最小值,注意字段顺序和空值过滤
footerData 是二维数组:[[col1, col2, col3]],外层数组代表 footer 行(通常只有一行),内层数组每一项必须严格对应 cols 中字段的声明顺序。计算时务必提前提取有效数值:
- 用
parseFloat(d.field) || 0或isNaN(parseFloat(val)) ? null : parseFloat(val)过滤非数字值 - 最大值用
Math.max(...validValues),最小值用Math.min(...validValues) - 如果某列全为空或非数字,
Math.max()会返回-Infinity,需兜底处理(如validValues.length ? Math.max(...validValues) : 0) - 示例片段:
footerData: [[ (function() { const vals = table.cache['demo'].map(d => parseFloat(d.price)); const valid = vals.filter(v => !isNaN(v)); return valid.length ? Math.max(...valid).toFixed(2) : '—'; })(), (function() { const vals = table.cache['demo'].map(d => parseFloat(d.score)); const valid = vals.filter(v => !isNaN(v)); return valid.length ? Math.min(...valid).toFixed(1) : '—'; })() ]]
监听 sort 和 page 事件重绘 footer,别依赖 reload
一旦用了 footerData,它就是静态快照,不会随排序、翻页自动更新。用户点击分页或排序后,table.cache['demo'] 已刷新,但 footer 还是旧值。必须显式监听:
- 在
table.render()外,用table.on('sort(demo)', ...)和table.on('page(demo)', ...)捕获事件 - 每次触发时重新计算
footerData,再调用layui.jquery('.layui-table-footer td')直接更新对应单元格文本(比整个表格reload更轻量) - 避免在事件回调里重复请求后端;优先复用
table.cache['demo'],它是当前页已渲染的真实数据 - 注意:不要在
done回调里一次性写死 footer——它只执行一次,无法响应后续交互
totalRow 和 footerData 不可共存,样式和前缀要自己补
只要传了 footerData,Layui 就彻底忽略 totalRow: true,包括它的 CSS 类名(如 layui-table-total)、默认的“合计:”前缀、甚至列对齐方式。这意味着:
- 如果你希望第一列显示“最大值:128.50”,就得把字符串拼好塞进
footerData[0][0],不能指望totalRowText生效 - 原生合计行的灰色背景、加粗字体等样式都不会出现,需要手动加 CSS(例如给
.layui-table-footer td设置background:#f8f8f8; font-weight:bold) - 列宽错位?检查
footerData数组长度是否等于cols[0].length,少一个就整体右移,多一个会溢出
最易被忽略的是:当数据为空或全为非数字时,Math.max(...[]) 返回 -Infinity,Math.min(...[]) 返回 Infinity,页面直接显示奇怪符号。这个边界必须手工判断,没捷径。











