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.最终结果是这样
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); },
希望以上内容对你有所帮助!如果还有其他问题,请随时提问。 各类知识收集 拥有多年CMS企业建站经验,对 iCMS, Fastadmin, ClassCMS, LeCMS, PbootCMS, PHPCMS, 易优CMS, YzmCMS, 讯睿CMS, 极致CMS, Wordpress, HkCMS, YznCMS, WellCMS, ThinkCMF, 等各类cms的相互转化,程序开发,网站制作,bug修复,程序杀毒,插件定制都可以提供最佳解决方案。