Layui合计行不支持直接配置平均值或最大值,需手动计算并注入footerData;监听sort/page事件重绘footer,且totalRow与footerData不可共存。

合计行不支持直接配置平均值或最大值,必须手动计算
Layui 的 footer 合计行默认只提供 totalRow: true 和内置的 sum(求和),不支持开箱即用的 avg 或 max。你看到的“合计”字样和数值都是前端遍历当前页数据后硬算出来的,框架本身没封装这些统计逻辑。
所以想显示平均值或最大值,得自己接管 footer 渲染过程——不是改配置项,而是重写 footerData。
用 footerData 手动注入平均值/最大值
在 table.render() 配置中传入 footerData 数组,每一项对应一列的 footer 单元格内容。你需要提前算好各列的平均值或最大值,再塞进去。
-
footerData是二维数组:外层数组是行(通常只有一行),内层数组是列,顺序必须和cols中字段顺序严格一致 - 平均值要自己除以
data.length,注意空值、非数字字段需过滤(比如isNaN(parseFloat(val))) - 最大值用
Math.max(...values),同样要先提取并转换有效数值 - 如果启用了分页,
footerData默认只基于当前页数据计算;如需全量统计,得额外请求后端或把全部数据存在前端(不推荐大数据量)
table.render({
elem: '#demo',
data: [...],
cols: [[
{field: 'price', title: '价格'},
{field: 'score', title: '评分'}
]],
// 手动计算并填入 footer
footerData: [[
(function() {
const prices = table.cache['demo'].map(d => parseFloat(d.price) || 0);
return (prices.reduce((a, b) => a + b, 0) / prices.length).toFixed(2);
})(),
(function() {
const scores = table.cache['demo'].map(d => parseFloat(d.score) || 0);
return Math.max(...scores);
})()
]]
});
监听 sort 和 page 后重新计算 footer
用户点击排序或翻页时,table.cache 会更新,但 footerData 不会自动刷新——它是一次性静态值。如果你希望 footer 始终反映当前页数据,必须手动监听事件并重绘 footer。
- 用
table.on('sort(demo)', ...)和table.on('page(demo)', ...)监听 - 每次触发后,调用
table.reload()并传入新的footerData,或者更轻量地:用layui.jquery直接修改 DOM 中的.layui-table-footer td - 避免在
reload里反复请求数据,优先复用table.cache['demo'](当前页已渲染数据)
注意 totalRow 和 footerData 不能共存
一旦设置了 footerData,Layui 就会忽略 totalRow: true,包括它的样式和自动求和行为。这不是 bug,是设计如此——框架把 footer 控制权完全交给你了。
如果你仍想保留 “合计:” 文字前缀,得自己加进去,比如:['合计:' + avgPrice, '最高:' + maxScore];如果列数多、逻辑复杂,建议抽成独立函数,别堆在配置里。
真正麻烦的不是算平均或最大值,而是确保每次数据视图变化时,footer 都能对齐当前页、类型安全、且不因空值或字符串干扰出错。多打几次 console.log(table.cache['demo']) 看看结构,比查文档快得多。










