bootstrap-Table 统计 求和 footerFormatter 分享

田诚诚 10月前 2188

1.表格很好,有的时候需求和,然后bootstrap-table 默认是关闭 footer的,所以表格不显示footer也就是最后一行
2.我们需要在表格初始化的时候打开footer选项 showFooter:true

var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                showFooter:true,
                extend: {
                    index_url: 'cneed/index',
                    add_url: 'cneed/add',
                    edit_url: 'cneed/edit',
                    del_url: 'cneed/del',
                    multi_url: 'cneed/multi',
                    table: 'lvdate',
                }
            });

3.在colums里面 将需要显示footer的列,加上footFormatter

columns: [
                    [ {title: '客户需求表',colspan: 14}],//这是第一行大标题
                    [
                        {checkbox: true,footerFormatter:function(data){
                                return '总计';//在第一列开头写上总计、统计之类
                            }
                        },

其中 footerFormatter:后面的 function 需要返回string 这是官方手册上说的
4.我们可以在需要的列进行计算,我这里纯是实验 所及计算了一下PID

{field: 'PID', title: __('Pid'),sortable: true,footerFormatter: function (data) {
                                var field = this.field;
                                var total_sum = data.reduce(function (sum, row) {
                                    return (sum) + (parseFloat(row[field]) || 0);
                                }, 0);
                                return total_sum.toFixed(2);
                            }

5.最终结果是这样
未标题-1.jpg
6.最终感谢 QQ:ID为:^阿茂-桂林 的大神 感谢关注 感谢耐心指导,祝你事业顺利,身体健康!

回答提问:当前统计整页的值,如何统计全部值并显示在前端呢?

1. 在控制器里面统计数据

/**
     * 查看
     */
    public function index()
    {
        //当前是否为关联查询
        $this->relationSearch = true;
        //设置过滤方法
        $this->request->filter(['strip_tags']);
        if ($this->request->isAjax()) {
            //如果发送的来源是Selectpage,则转发到Selectpage
            if ($this->request->request('keyField')) {
                return $this->selectpage();
            }
            list($where, $sort, $order, $offset, $limit) = $this->buildparams();
            $total = $this->model
                ->where($where)
                ->order($sort, $order)
                ->count();

            $list = $this->model
                ->where($where)
                ->order($sort, $order)
                ->limit($offset, $limit)
                ->select();
            $sum['price']=0;//这里我们要统计的值是price 价格的合计,先定义一个变量值为0,用来保存统计的值
            foreach ($list as $row) {
                $row->visible(['id', 'price', 'phone', 'spec', 'account_id', 'remark', 'createtime', 'updatetime', 'admin_id']);
                $sum['price']+=$row['price']//当然这里可以进行一些其他计算 如单价×价格 啥的 我这里简单的计算和
            }
            $list = collection($list)->toArray();
            $result = array("total" => $total, "rows" => $list,"sum"=>$sum);//我们把$sum的值传单前端模板页面
            return json($result);
        }
        return $this->view->fetch();
    }

前端模板页面我们在js中 接收值并用jquery去修改到相应位置上去,代码片段如下

index: function () {
            // 初始化表格参数配置
            Table.api.init({ //初始化表格
                extend: {
                    index_url: 'grain/driver/detail',
                    table: 'grain_buy',
                }
            });

            var table = $("#table");
            table.on('load-success.bs.table', function (e, data) {//在表格数据加载成功后 data为数据
                //统计核算显示到模板页面
                $("#toolbar .total").remove(); //防着刷新后 生成多余的统计单元
                $("#toolbar").append('<a href="javascript:;" class="btn btn-default total" style="font-size:14px;color:dodgerblue;">' +
                    '合计:<span>'+data.sum.price+'元 </span></a>');//用js在按钮旁边加一个统计的单元 参照K神的demo
            });
            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                sortOrder:'asc',
                columns: [
                    [{title: '运输明细表', colspan: 16,class:'Transport'}],
                    [
                        {checkbox: true},
                        {field: '', title: __('序号'), formatter: function (value, row, index) {
                                var options = table.bootstrapTable('getOptions');
                                var pageNumber = options.pageNumber;
                                var pageSize = options.pageSize;

                                return (pageNumber - 1) * pageSize + 1 + index;
                            }, operate: false},
                        {field: 'date', title: __('Date'), operate:'RANGE', addclass:'datetimerange'},
                        {field: 'driver.num', title: __('Driver.num')},
                    ]
                ]
            });
            Table.api.bindevent(table);
        },
最后于 1月前 被田诚诚编辑
感谢以下的小伙的赞赏支持
最新回复 (18)
  • F4NNIU 打赏 10月前
    感谢TA
    0 引用 2

    感谢分享。

  • crzay 10月前
    感谢TA
    0 引用 3

    @bqldragon @F4NNIU footerFormatter 切换了手机版面后 没有显示出来了 只有电脑版的列表才有 这个有设定吗 另外 如果不想要分页 全部一批数据在同一页显示 有设定吗

  • 田诚诚 楼主 10月前
    感谢TA
    0 引用 4
  • a283629211 9月前
    感谢TA
    0 引用 5

    我按照大哥这样写缺没有这样效果过,求解析下。
    image.png
    image.png
    出现了两个ID 求问下怎么解决

  • 田诚诚 楼主 8月前
    感谢TA
    0 引用 6

    @a283629211 你这个错误特别好笑 你自己写了两遍 checkbox 和 id的列 当然就出现两个了,仔细阅读我的代码及注释!及注释!及注释!

    最后于 8月前 被田诚诚编辑
  • siming 1月前
    感谢TA
    0 引用 7

    请问如何统计搜索出来的所有数据,现在只是统计当页的,

  • 田诚诚 楼主 1月前
    感谢TA
    0 引用 8

    @siming 在后端 index的 foreach 中计算 返回到前端 然后再js中 jquery显示即可

  • siming 1月前
    感谢TA
    0 引用 9

    思路我也是这个思路,关键是前端怎么显示,怎么获取才能把它放到底部

  • 田诚诚 楼主 1月前
    感谢TA
    0 引用 10

    @siming 修改了贴子内容 回答了你的问题

  • siming 1月前
    感谢TA
    0 引用 11

    @田诚诚 谢谢

  • likeni 29天前
    感谢TA
    0 引用 12

    当前统计整页的值,如何统计全部值并显示在前端呢?----这个的意思是把数据显示在首页吗?就是在综合面板显示其他栏目的汇总数据吗?

  • likeni 29天前
    感谢TA
    0 引用 13

    教程是,当前页统计和表所有数据统计的方法吧!

  • 田诚诚 楼主 28天前
    感谢TA
    0 引用 14

    @likeni 看js也能看出来啊 是统计所有满足搜索条件的数据 并显示在 表格按钮的隔壁

  • likeni 28天前
    感谢TA
    0 引用 15

    @田诚诚 谢谢,爱你哦

  • qq244381 10天前
    感谢TA
    0 引用 16

    请问一下,我要在下面加总计,但是我不要那个单选框要怎么去写啊?

  • 田诚诚 楼主 10天前
    感谢TA
    0 引用 17

    @qq244381 没明白 单选框是哪个 下面指的是哪里?

  • qq244381 10天前
    感谢TA
    0 引用 18

    就是左边那个小框框,image.png

  • 田诚诚 楼主 10天前
    感谢TA
    0 引用 19

    @qq244381 image.png
    本来也没有小框框啊

  • 未登录
    20
返回