layui 表格合计

有一种方式是当前展示出来的总和，具体如下:

效果是上面的，代码是：

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 表格合计相关推荐

Layui 数据表格合计
Lay-ui数据表格合计实现基础的数据表格合计获取合计数据修改合计数据合计后计算平均值去除小数合计所有数据(有分页) 编辑后重新合计总代码阅读提示:本人萌新一枚,写此博客仅仅是记录一下 ...
layui数据表格合计行
在日常的学习或开发中,关于后台管理这一块的都会使用到layui.table数据表格,只要用到layui.table数据表格一般就会用到数据表格合计行. 在layui官方文档数据表格的这一栏中,有&qu ...
layui 表格（table）合计取整问题更改
layui 表格(table)合计取整问题更改: layui table.js 路径 ./static/js/layui/lay/modules/table.js 提示: 如非必要,谨慎修改源码 v ...
Layui表格数据值相加（一）
开发工具与关键技术: Visual Studio done回调作者:黎凤焕撰写时间:2019年 7 月 19 日 Layui表格列数据(金额数据列的数据自动相加)相加,将总金额赋值给input框, ...
点击不同的统计类型重载layui表格
点击不同的统计类型重载layui表格开发工具与关键技术:Visual Studio 2015 作者:徐晶旗撰写时间:2019年8月17日在做项目的时候涉及到了统计分析,比如要分析经营利润分析,里 ...
Layui表格数据的计算
在我们日常学习中以及项目的开发中,不少会用到数据表格将数据进行统计维护信息,而其中用的最多的并且也比较快捷方便的放法便是layui数据表格的渲染,重载等等.... 而部分项目有时会涉及到一个数量的问题 ...
Layui表格好看样式
Layui表格好看样式开发工具与关键技术:web 作者:熊琪撰写时间:2019.7.27 Layui表格的运用至今已经很广了,如需要以下样式的请继续往下看哦,如图一为layui表格的样式效果图,主 ...
Layui 表格编辑
html代码 <td class="My_edit"></td> Jquery代码 //-----[Layui表格编辑()] function Layui_ ...
layui表格获取不到多层数据的解决方案
layui表格获取不到多层数据的解决方案参考文章: (1)layui表格获取不到多层数据的解决方案 (2)https://www.cnblogs.com/yinhuiyang/p/9298559.h ...

layui 表格合计

layui 表格合计相关推荐

最新文章

热门文章