解决bootstrap table footerFormatter表脚和表体列错位问题

需求：需要把表格的一列的内容在表最下面一行进行汇总，显示合计

实现合计步骤：

1.在初始化表格时，开启显示表脚的属性，如图

 2.在需要合计的列中添加footerFormatter函数，如图

这样就会在表格最下面显示合计，效果如下

 

但是注意看黄色箭头所指的地方，发现合计列和表格主体列错位了 

解决这个问题可以这样办：在表格初始化中加入一个函数onLoadSuccess，这个函数表示是数据加载成功后执行的函数，在这个函数中写入以下内容：

onLoadSuccess:function(data) {//该方法解决了表脚不能和表体列对齐的问题
    //表格表体的td集合
    var body=$("#table_data thead tr th");
    //表脚表格的表头td集合
    var footer=$(".bootstrap-table .fixed-table-container .fixed-table-footer table thead tr th");
    //把表体的td宽度赋值给表脚表格的td
    body.each(function(){
        footer.width($(this).width());
    })
    //刷新视图
    $('#table_data').bootstrapTable('resetView');
}

注意：把红色的table_data替换为你自己的表格的id

下面给出html和js代码

html内容：表格

<table id="table_data"></table>

js内容：初始化bootstrap table

$('#table_data').bootstrapTable('destroy').bootstrapTable({
    classes: "table table-bordered table-hover", //设置表格样式
    //******服务器端分页设置****
    url: "url", //服务器返回数据的网址
    method: 'post',   //数据请求方式
    contentType: 'application/x-www-form-urlencoded',//method为post时，必须设置contentType为application/x-www-form-urlencoded
    sidePagination: "server",                              // 设置在服务端还是客户端分页
    cache: false,                                          // 是否使用缓存
    clickToSelect:true,//点击行选中复选框
    pagination: true,                                      // 是否显示分页
    search: false,                                         // 是否有搜索框
    pageNumber: 1,                                         // 首页页码，默认为1
    pageSize: 60,                                           // 页面数据条数
    pageList: [20, 40, 60, 80, 100, 1000],
    //checkboxHeader:false, //隐藏表头中的复选框
    detailView: true,  //是否显示子表
    queryParamsType: "",
    showFooter:true,//显示表格脚
    queryParams: function (params) {//默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
        // queryParamsType设置为 '' 在这种情况下传给服务器的参数为：pageSize,pageNumber
        return {
            pageSize: params.pageSize,                     // 每页记录条数
            pageNumber: params.pageNumber,                 // 当前页索引
            month: $('#input_month').val(),
            supplierCode: $('#select_supplierCode').val(),
            departmentId: JSON.stringify($('#select_departmentId').val())
        };
    },
    formatLoadingMessage: function () {
        return "请稍后，正在加载";
    },
    formatNoMatches: function () {
        return "暂无匹配数据";
    },
    height: 456,//窗口高度
    onLoadSuccess:function(data) {//该方法解决了表脚不能和表体列对齐的问题
        //表格表体的td集合
        var body=$("#table_data thead tr th");
        //表脚表格的表头td集合
        var footer=$(".bootstrap-table .fixed-table-container .fixed-table-footer table thead tr th");
        //把表体的td宽度赋值给表脚表格的td
        body.each(function(){
            footer.width($(this).width());
        })
        //刷新视图
        $('#table_data').bootstrapTable('resetView');
    },
    columns: []
})