bootstrap-table footer Total (custom total statistics)

• First add a property to the table:

showFooter: footer

js code as follows:

//初始化bootstrapTable
initBootstrapTable: function () {
    var oTable = new TableInit("/manage/report/merchant/page", true);
    oTable.Init();
    showTotal();

    $("#btn_query").click(function () {
        $("#bootstrapTable").bootstrapTable('refresh', TableInit);
        showTotal();
    });

function showTotal(){
    var params = {};
    var param = $("#searchForm").serializeArray();
    for (var p in param) {
        if (param[p].value != '') {
            params[param[p].name] = param[p].value;
        }
    }
    $.ajax({
        type: "get",
        url: "/manage/report/merchant/total",
        data: params,
        success: function (data) {
            var reportTerDay = data.reportTerDay;
            saleTickets = reportTerDay.saleTickets;
            saleMoney = reportTerDay.saleMoney;
            winTickets = reportTerDay.winTickets;
            winMoney = reportTerDay.winMoney;
            bigTickets = reportTerDay.bigTickets;
            bigMoney = reportTerDay.bigMoney;
            proxyMoney = reportTerDay.proxyMoney;
            $("#saleTickets").text(reportTerDay.saleTickets + "张");
            $("#saleMoney").text(reportTerDay.saleMoney + "元");
            $("#winTickets").text(reportTerDay.winTickets + "张");
            $("#winMoney").text(reportTerDay.winMoney + "元");
            $("#bigTickets").text(reportTerDay.bigTickets + "张");
            $("#bigMoney").text(reportTerDay.bigMoney + "元");
            $("#proxyMoney").text(reportTerDay.proxyMoney + "元");
        },
    });
}

function columnsDefined() {
    detailView: true
    return [
        {
            title: '商户名称',
            field: 'merName',
            align: 'center',
            footerFormatter: function (value) {
                return "<span style='color:red'>总计</span>";
            }
        },
        {
            title: '网点名称',
            field: 'networkName',
            align: 'center',
            footerFormatter: function (value) {
                return "<span style='color:red'>-</span>";
            }
        }, {
            title:'Terminal ID', 
            Field: 'termld',
            align: 'center',
            footerFormatter: function (value) {
                return "<span style='color:red'>-</span>";
            }
        },
        {
            title: '玩法名称',
            field: 'chineseName',
            align: 'center',
            footerFormatter: function (value) {
                return "<span style='color:red'>-</span>";
            }
        },
        {
            title: '销售票数(张)',
            field: 'saleTickets',
            align: 'center',
            sortable: true,
            footerFormatter: function (value) {
                return "<span style='color:red' id='saleTickets'>" + saleTickets + "张</span>";
            }
        }, {
            title: '销售金额(元)',
            field: 'saleMoney',
            align: 'center',
            sortable: true,
            footerFormatter: function (value) {
                return "<span style='color:red' id='saleMoney'>" + saleMoney +"元</span>";
            }

        }, {
            title: '中奖票数(张)',
            field: 'winTickets',
            align: 'center',
            sortable: true,
            footerFormatter: function (value) {
                return "<span style='color:red' id='winTickets'>" + winTickets + "张</span>";
            }
        },
        {
            title: '中奖金额(元)',
            field: 'winMoney',
            align: 'center',
            sortable: true,
            footerFormatter: function (value) {
                return "<span style='color:red' id='winMoney'>" + winMoney +"元</span>";
            }
        },
        {
            title: '大奖票数(张)',
            field: 'bigTickets',
            align: 'center',
            sortable: true,
            footerFormatter: function (value) {
                return "<span style='color:red' id='bigTickets'>" + bigTickets + "张</span>";
            }
        },
        {
            title: '大奖金额(元)',
            field: 'bigMoney',
            align: 'center',
            sortable: true,
            footerFormatter: function (value) {
                return "<span style='color:red' id='bigMoney'>" + bigMoney +"元</span>";
            }
        },
        {
            title: '结算金额(元)',
            field: 'proxyMoney',
            align: 'center',
            sortable: true,
            footerFormatter: function (value) {
                return "<span style='color:red' id='proxyMoney'>" + proxyMoney +"元</span>";
            }
        },{
            title: '统计时间',
            field: 'statsDate',
            align: 'center',
            sortable: true,
            footerFormatter: function (value) {
                return "<span style='color:red'>-</span>";
            }
        }

    ];
};

The net effect is as follows: