bootstrap-table 頁腳總計(自定義統計總數)

•首先給table添加屬性：

showFooter: footer

js代碼以下：

//初始化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: '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>";
            }
        }

    ];
};

最後效果圖以下：

 須要注意的是，這種方法有個弊端，當查詢記錄爲空時，就會出現表頭和對應的列對仗不整齊，影響美觀~ 或者我只是想統計某一列的總和的時候這種頁腳展現也就顯得不那麼好看了，後來就想到了自定義統計總數，

話很少說，直接上代碼

在html頁面上直接添加一個div，

 

 而後重寫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/games/win/winMoneyTotal",
        data: params,
        success: function (data) {
             winMoneyTotal=data.winMoneyTotal;
            var html="";
            html="<span >中獎總金額：</span>"
            html+="<span style='color:red'>" + winMoneyTotal +"元</span>";
            $("#count").html(html);
        },
    });
}

 效果圖：

 

 完事了，老弟~