实现效果如下:

以上对列的统计,并不是针对当前页,而是针对整个筛选条件的数据统计,也就是总的统计。
实现方法:
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);
});