LAYUI table total

LAYUI table total

The effect is as above, the code is:

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'}
    ]]
  });

The important thing is the parameter totalRow. Another way is to display the sum of all lists. The code is as follows:

The effect is as above, the code is as follows:

The content returned by the interface needs to add a field, of the following type:

In html it is written like this:

<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>

Write this in 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
        });

In this way, the above effect can be achieved