统计栏应加在 table 外层容器中，通过 beforeRender 钩子在容器上方插入 DOM；重载时需用 done 回调或手动替换更新，且样式应模拟表头结构以对齐列宽。
统计栏加在哪儿？别动 table 的 lay-data
layui 的 table.render() 默认不支持表格上方直接插入统计栏，强行往 table 标签里塞 thead 或额外 tr 会导致渲染错乱或数据错位。真正该操作的位置是表格容器——也就是 table 外层那个你传给 elem 的 dom 元素。
用 beforeRender 插入统计 DOM 最稳
beforeRender 是 table.render() 的生命周期钩子，在表格渲染前触发，此时 DOM 容器还是空的，适合安全注入统计栏。注意它只在首次渲染时执行，后续重载（如分页、搜索）不会触发，所以统计值得自己维护或重算。
常见做法：
- 在
beforeRender回调里，用$(options.elem).before(...)往容器上方插入一个<div class="table-summary">... - 统计值来源：如果是静态汇总（如“共 127 条”），可从
options.data或接口响应里取；如果是动态计算（如“金额合计：¥24,580.00”），建议在请求成功后、调用table.render()前先算好，存到变量里供beforeRender使用 - 避免在
beforeRender里发 Ajax，会阻塞渲染且难控制时序
统计栏样式要手动对齐列宽？用 CSS 模拟表头结构
统计栏如果只是文字居中，容易和下方表格列不对齐。更稳妥的方式是让统计栏的内部结构和表格的 thead 一致：用 display: table 或真实 table 包裹，每列宽度设为与对应列相同（通过 colgroup 或内联 width）。否则当用户拖拽列宽、或启用响应式时，统计栏会偏移。
示例关键代码：
<div id="demo"></div>
<script>
table.render({
elem: '#demo',
url: '/api/list',
cols: [[
{field:'name', title:'姓名', width:120},
{field:'amount', title:'金额', width:100, align:'right'}
]],
beforeRender: function(options){
const $container = $(options.elem);
// 插入统计栏（结构模仿表头）
$container.before(`
<div class="table-summary" style="display:table; width:100%; border-bottom:1px solid #e6e6e6;">
<div style="display:table-row">
<div style="display:table-cell; width:120px; padding:8px 15px; font-weight:bold">合计：</div>
<div style="display:table-cell; width:100px; padding:8px 15px; text-align:right; font-weight:bold">¥24,580.00</div>
</div>
</div>
`);
}
});
</script>
重载表格时统计栏不更新？得手动刷新或用 done
beforeRender 不会在 table.reload() 时执行，所以分页、搜索后统计栏内容就过期了。解决办法只有两个：
- 把统计逻辑抽出来，每次 reload 前先调用一次，生成新统计 HTML，再用
$(...).replaceWith()替换旧统计栏 - 改用
done回调：等表格渲染完，再用table.cache或接口返回的汇总字段，更新已存在的统计栏 DOM（需提前加个id或class方便定位） - 千万别在
done里反复.before()，会不断叠加统计栏
复杂点在于统计逻辑可能依赖服务端返回的聚合字段（比如 sum_amount），而 Layui 默认不把这类字段透传给前端。要么后端在响应里多加个 summary 字段，要么 reload 时额外请求一次统计接口——后者容易引发竞态，得加 loading 状态锁住按钮。
