layui的数据表格totalRow合计之合计数据放首行，表格第一行

近期很多人关注layui数据表格首行统计，具体效果如下图，所以特意将方法分享如下。

本功能需要修改layui底层代码，如无代码修改经验，建议谨慎操作。无论如何，修改前请记得备份源码。

本次修改对应文件：/layui/lay/modules/table.js

具体操作步骤：

1. 代码中查找d.data.totalRow，找到如下代码

2. "{{# if(d.data.totalRow){ }}",'<div class="table-total">','<table cellspacing="0" cellpadding="0" border="0" class="table" ','{{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}>','<tbody><tr><td><div class="table-cell" style="visibility: hidden;">Total</div></td></tr></tbody>',"</table>","</div>","{{# } }}",

3. 查找代码<div class="table-body table-main">，将步骤2中的代码复制到<div class="table-body table-main">之前；

4. <style type="text/css">
   .table-total tr{ background-color:#fff !important;}
   .table-total{ border-bottom: 1px solid #e6e6e6 !important;}
   </style>

   自带的CSS统计行是灰色的，此CSS主要修改统计行背景色和下边框，效果看起来更加美观；
5. 保存更新缓存后即可。

本文属原创，转载请注明原文：http://www.zhimatong.com/jiaocheng/372.html

为保证教程的实用性及扩大知识面覆盖，如果您有相似问题而未解决，可联系在线客服免费技术支持。