有一种方式是当前展示出来的总和，具体如下:
效果是上面的，代码是：
table.render({elem: '#demo',height: 420,url: '/demo/table/user/' //数据接口,title: '用户表',page: true //开启分页,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档,totalRow: true //开启合计行,cols: [[ //表头{type: 'checkbox', fixed: 'left'},{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'},{field: 'username', title: '用户名', width:80},{field: 'experience', title: '积分', width: 90, sort: true, totalRow: true},{field: 'sex', title: '性别', width:80, sort: true},{field: 'score', title: '评分', width: 80, sort: true, totalRow: true},{field: 'city', title: '城市', width:150} ,{field: 'sign', title: '签名', width: 200},{field: 'classify', title: '职业', width: 100},{field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true},{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}]]});
重要的是totalRow 这个参数，还有一种是显示所有列表的总和，代码如下：
效果是上面，代码如下：
接口返回的内容要加个字段，如下类型：
html中这样写：
<div class="count">合计：<div id="total_price" style="color:red;display:inline-block;"></div>;<div id="total_num" style="color:red;display:inline-block;"></div></div>
js中 这样写：
var tableIn = table.render({id: 'content',elem: '#list',url: '{:url("index")}',where:{catid:'{:input("catid")}'},method: 'post',toolbar: '#topBtn',page: true,cols: [[{type: "checkbox", fixed: true},{field: 'id', title: '{:lang("id")}', width: 80, fixed: true},{field: 'trade_no', title: '系统订单号', width: 100, fixed: true},{field: 'thr_no', title: '微信平台订单号', width: 100,fixed: true},........{width: 160, align: 'center', toolbar: '#action',title:'操作',fixed: false}]],done:function(res){$("#total_price").html(res.total_price)$("#total_num").html(res.total_num)},limit: 10});
这样就是实现上面的效果啦
如果觉得《layui 表格合计》对你有帮助，请点赞、收藏，并留下你的观点哦！
