layui/pear 合计行(包含后端返回数据)

9 篇文章 0 订阅

方式一:统计当前页数据

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Content/layui/layui.js"></script>
<script>
    layui.use('table', function () {
        var table = layui.table;

        table.render({
              elem: '#test'
            , url: '/demo/table/user/'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
            , totalRow: true //开启合计行
            , cols: [[
                  { field: 'id', width: 80, title: 'ID', sort: true, totalRowText: '合计行' }
                , { field: 'username', width: 80, title: '用户名' }
                , { field: 'sex', width: 80, title: '性别', sort: true }
                , { field: 'city', width: 80, title: '城市' }
                , { field: 'sign', title: '签名', width: '30%', minWidth: 100 } //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
                , { field: 'experience', title: '积分', sort: true }
                , { field: 'score', title: '评分', sort: true,totalRow: true }
                , { field: 'classify', title: '职业' }
                , { field: 'wealth', width: 137, title: '财富', sort: true }
            ]]
        });
    });
</script>

方式二:统计接口返回数据(layui需2.5.6以上,pearlayui项目下载layui.js覆盖即可)
当开启时,则默认由前端自动合计当前行数据。从 layui 2.5.6 开始: 若接口直接返回了合计行数据,则优先读取接口合计行数据,格式如下:

{
  "code": 0,
  "totalRow": {
    "score": "666"
    ,"experience": "999"
  },
  "data": [{}, {}],
  "msg": "",
  "count": 1000
}

方式二示例:
在这里插入图片描述

如上,在 totalRow 中返回所需统计的列字段名和值即可。
另外,totalRow 字段同样可以通过 parseData 回调来解析成为 table 组件所规定的数据格式。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值