bootstraptable实现根据字段数据统计的方法

实现效果如下：

以上对列的统计，并不是针对当前页，而是针对整个筛选条件的数据统计，也就是总的统计。

实现方法：

var $table = $('#table');
$table.bootstrapTable('destroy').bootstrapTable({
	toolbar:"#toolbar",
	method: 'post',
      dataType: "json",
      dataField: 'rows',
      url:'https://www.dsboke.com/',
      undefinedText: "null",//当数据为 undefined 时显示的字符
      striped : true, //是否显示行间隔色
      pageNumber : 1, //初始化加载第一页
      pagination : true,//是否分页
      sidePagination: "server",
      pageSize : 10,//单页记录数
      pageList : [ 10, 20, 30, 60, 100],//可选择单页记录数
      paginationPreText: '上一页',
      paginationNextText: '下一页',
      queryParamsType : "limit",
      uniqueId : 'id',
      showFooter:true,   //显示底部统计栏
      queryParams : function(params) {
        var filter={};
        filter.offset=params.offset;
        filter.pageNumber=params.limit;
        filter.retailNum=0;  //统计总数量,需要后台返回
        filter.totalPrice=0;  //统计总金额,需要后台返回
        return filter;
      },
      columns:[
        {
          title : '序号',
          field : '',
	        formatter: function (value, row, index) {
	            return index+1;
	        }
        },
        {
          	title : '品名',
          	field : 'name',
        	footerFormatter: function(value){
        		return "统计数据";
    		}
        },
        {
          title : '款号',
          field : 'code',
        },
        {
          title : '条码',
          field : 'bar_code'
        },
        {
          title : '颜色',
          field : 'color',
        },
        {
          title : '尺码',
          field : 'size',
        },
        {
          title : '状态',
          field : 'status',
          formatter: function (value, row, index){
            value=Number(value);
            var statusNotic='';
            if(value==0){
              statusNotic='<span style="color:#10BEB4;font-weight:bold;">待结算</span>';
            }
            if(value==1){
              statusNotic='<span style="color:green;font-weight:bold;">已结算</span>';
            }
            if(value==2){
              statusNotic='<span style="color:red;font-weight:bold;">已退单</span>';
            }
            if(value==3){
              statusNotic='<span style="color:#F0AD4E;font-weight:bold;">部分退单</span>';
            }
            return statusNotic;
          }
        },
        {
          title : '零售数量',
          field : 'salenum',
          footerFormatter: function(rows){  //显示统计数量
                return '0';
            }
        },
        {
          title : '成交金额',
          field : 'final_price',
          footerFormatter: function(rows){   //显示统计金额
                return '0';
            }
        },
        {
          title : '退货数量',
          field : 'return_num',
        },
        {
          title : '单号',
          field : 'ref',
        },
        {
          title : '店铺',
          field : 'warehouse_name',
        },
        {
          title : '营业员',
          field : 'salesman',
        },
        {
          title : '时间',
          field : 'create_time',
          formatter: function (value, row, index){
            return new Date(value*1000).toLocaleString();
          }
        }
      ],
});
//监听表格加载完成后获取后台返回的两个统计字段，然后使用jq将统计结果加入到对应的位置
$table.on("load-success.bs.table",function(e,p){
	var retailNum=p.retailNum;
	var totalPrice=p.totalPrice;
	$table.find("tfoot th:eq(7) .th-inner").text(retailNum);
	$table.find("tfoot th:eq(8) .th-inner").text(totalPrice);
});