fastadmin的bootstrapTable怎么在表格页脚添加统计功能？

2024-10-10 21:37:12

小程序码

文章目录

热门文章

整理下php学员遇到的一些问题 431

fastadmin监听或重写删除编辑按钮事件 285

phpstudy怎么手动安装php8.3.0版本？ 275

文档：一个案例学会fastadmin插件开发 148

php基础入门课程资料文档课件 134

表单验证：密码和确认密码的验证和文字提示 76

百题斩：用递归方式扁平化嵌套数组 67

百题斩：字符串的逆序函数 60

案例代码：用油猴脚本统计b站课堂课程总时长 59

使用ffmpeg把mp4转为加密后的m3u8文件 55

![](https://resource.maoshu.fun/storage/default/20241010/imagefeb4404f6f93b6899136bc7dfd7268ab31fadbcf.png?e=1732499478&token=Ov7mXAv_8azPtTTXXyhh0S5qpDFEhafGpHARTAg2:bVeLKmggnmZX0_cLIBz60fpdJ0E=)

> 官方的方法有问题，列数过多的情况下，会有滑块分离现象（上面数据左右滑动，底部页脚不跟着走），下面这是我自己写的方法，能有效解决这个问题。

### 我的方法：
把下面的代码直接复制到表格实例化代码的后面即可。

#### rule里面的规则：
```
title: 列的字段名，指定哪一列显示“合计”两个字；

titleName: “合计” 两个字在这里可以改

sum：里面放数组，指定要合计那些列，只需要把要合计的那些列的列名放这里面即可，不放的不会做统计。

decimal：填整数，保留几位小数
```

监听表格数据渲染完成事件：
`table.on('post-body.bs.table')`

!!! warning 此处为本文章的隐藏内容
需花费 100 积分兑换 或 猫叔授权后开放阅读。
!!!

### 官方方法：

#### 1.在表格初始化时增加显示页脚 showFooter: true

![](https://resource.maoshu.fun/storage/default/20241010/image834bb25c1d99b2258fa62567991a7414a589db5e.png?e=1732499478&token=Ov7mXAv_8azPtTTXXyhh0S5qpDFEhafGpHARTAg2:8gRoXDMAVgODPNmk-e8UC3fgIf0=)

#### 2.在字段后面新增函数 footerFormatter，来显示统计结果

```js
{field: 'id', title: __('Id'),
    footerFormatter: function () {
        return '合计';//对页脚第一列赋：'合计'
    }
},
```

return的返回值，就是你的统计结果，会显示在页脚；所以你只需要在这个函数里计算统计结果，再返回就行了。

例如下面这段：

```js
{field: 'num', title: '测试数字',footerFormatter: function (row) {
    var count = 0;
        for (var i in row) {
            if(row[i].num !=null){
                count += row[i].num;
            }
        }
        return count.toFixed(2);//保留两位小数
}},
```