BootstrapTable固定头和底部

查看效果

版本选择

采用的bootstrapTable样式与js的版本是1.15.4，采用比较低的版本会在有滚动条的情况下，表格不对齐

需要引用的CSS与js

代码语言：javascript复制

    <!-- 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>

代码语言：javascript复制

<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>

代码语言：javascript复制

<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") ，避免表格线条不对齐。

(adsbygoogle = window.adsbygoogle || []).push({});

push window 表格

0 人点赞