bootstraptable 汇总_bootstrap-Table 统计 求和 footerFormatter 分享

1.表格很好，有的时候需求和，然后bootstrap-table 默认是关闭 footer的，所以表格不显示footer也就是最后一行

2.我们需要在表格初始化的时候打开footer选项 showFooter:truevar 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的列，加上footFormattercolumns: [

[ {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.最终结果是这样

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('' +

'合计：'+data.sum.price+'元 ');//用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);

},