不能直接写HTML是因为Layui的totalRow只输出字段值、不解析HTML;应改用totalRowTemplate自定义模板,支持Layui语法和事件绑定。
合计行右侧加链接为什么不能直接写 HTML?
layui 的 totalrow 是通过内置模板渲染的,它只识别 field 对应的字段值,不执行 html 解析——你传入 "<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">导出</a>",最终只会显示为纯文本。这是最常踩的坑,很多人试了几次发现链接没反应,其实是被当字符串原样输出了。
用 totalRowTemplate 替代默认合计行
Layui 2.8+ 支持 totalRowTemplate 配置项,允许你完全自定义合计行结构。它接收一个字符串模板(支持 Layui 模板语法),且会在数据上下文中自动注入 data(即各列的合计值)和 cols(列配置数组)。
实操建议:
- 在
table.render()配置中移除totalRow: true,改用totalRowTemplate - 模板中用
{{ d.字段名 }}取对应列合计值,右侧链接用普通<a>即可 - 注意:模板字符串需用单引号包裹,避免与内部双引号冲突
totalRowTemplate: '<tr><td>合计</td><td>{{ d.amount }}</td><td>{{ d.count }}</td><td><a href="javascript:void(0)" onclick="exportTotal()">导出汇总</a></td></tr>'
如果用的是旧版 Layui(
老版本不支持 totalRowTemplate,只能靠 DOM 注入 + 重绘时机控制。关键点是等表格渲染完成、合计行插入后再操作:
- 监听
done回调,在里面用setTimeout延迟执行(因为合计行是异步插入的) - 定位合计行:
$(elem).next('.layui-table-total').find('tr')或直接查.layui-table-total td:last - 不要用
.html()覆盖整行,容易破坏原有合计逻辑;推荐在最后一列单元格内追加:$lastTd.append('<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">链接</a>') - 确保
exportTotal函数已全局声明,或用事件委托绑定
链接点击后如何获取当前合计数据?
合计行本身不携带原始数据对象,但你可以从 table.cache 中重建统计结果,或更简单——在生成合计行时把数据挂到 DOM 上:
- 在
totalRowTemplate中加data-amount="{{ d.amount }}" data-count="{{ d.count }}" - JS 中用
$(this).closest('tr').data('amount')拿值 - 若用老版本 DOM 注入,可在追加链接时同步设置:
$a.data('amount', amountValue)
别忘了给链接加 cursor: pointer 和适当 padding,否则视觉上不像可点元素——这个细节上线后经常被产品揪着问。


















