BootstrapTable固定頭和底部

查看效果 

版本選擇

採用的bootstrapTable樣式與js的版本是1.15.4，採用比較低的版本會在有滾動條的狀況下，表格不對齊

須要引用的CSS與js

<!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-table-develop/src/bootstrap-table-1.15.4.min.css">

    <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
	<script src="../../bootstrap/js/bootstrap.js"></script>
    <script src="../../plugins/bootstrap-table-develop/src/tableExport.min.js"></script>
    <script src="../../plugins/bootstrap-table-develop/src/bootstrap-table-1.15.4.min.js"></script>
    <script src="../../plugins/bootstrap-table-develop/src/locale/bootstrap-table-zh-CN.js"></script>
    <script src="../../plugins/bootstrap-table-develop/src/bootstrap-table-export-1.15.4.min.js"></script>

<table class="" id="tableTest1" data-search="true">
    <thead>
        <tr>
            <th data-field="customName">客戶名稱</th>
            <th data-sortable="true" data-field="tiaoyazhanName" data-footer-formatter="totalTextFormatter">其餘名稱</th>
            <th data-sortable="true" data-field="MondayValue" data-footer-formatter="totalFormatter">9月09 </br>星期一</th>
            <th data-sortable="true" data-field="TuesdayValue" data-footer-formatter="totalFormatter">9月09 </br>星期二</th>
            <th data-sortable="true" data-field="WednesdayValue" data-footer-formatter="totalFormatter">9月09 </br>星期三</th>
            <th data-sortable="true" data-field="ThursdayValue" data-footer-formatter="totalFormatter">9月09 </br>星期四</th>
            <th data-sortable="true" data-field="FridayValue" data-footer-formatter="totalFormatter">9月09 </br>星期五</th>
            <th data-sortable="true" data-field="SaturdayValue" data-footer-formatter="totalFormatter">9月09 </br>星期六</th>
            <th data-sortable="true" data-field="SundayValue" data-footer-formatter="totalFormatter">9月09 </br>星期日</th>
            <th data-sortable="true" data-field="weekTotal">本週累計</th>
        </tr>
    </thead>
</table>

<script src="json/data1.js"></script>
<script type="text/javascript">
// data是json/data1.js引入的數據
var data;
function totalTextFormatter() {
    return '總計'
}
// 統計函數
function totalFormatter(data) {
    console.log(data)
    data = data
    var field = this.field;
    return data.map(function(row) {
        return +row[field]
    }).filter(function(item) {
        return !window.isNaN(item);
    }).reduce(function(sum, i) {
        return sum + i
    }, 0)
}
$(function() {
    $('#tableTest1').bootstrapTable({
        //sortable: true,
        //height: $(window).height() - 250,
        data: data,
        height: 300,
        showFooter: true,
        onSearch: function() {}
    });
    $('#tableTest1').bootstrapTable("resetView")

    // 沒有數據的狀況下刪除統計行
    setTimeout(function() {
        //console.log($(".fixed-table-body tbody tr:not(.no-records-found)").length)
        if ($(".fixed-table-body tbody tr.no-records-found").length) {
            $(".fixed-table-footer").remove()
            //$(".fixed-table-footer").css("visibility","hidden")
            $(".fixed-table-body").css({ "border": "1px solid #ccc", "border-top": "none" })
            $(".fixed-table-border").css("border", "none")
        }
    }, 50)
})
</script>

注意：初始化bootstrapTable後再執行$('#tableTest1').bootstrapTable("resetView") ，避免表格線條不對齊。