前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >BootstrapTable固定头和底部

BootstrapTable固定头和底部

作者头像
tianyawhl
发布2019-09-26 12:45:56
2.8K0
发布2019-09-26 12:45:56
举报
文章被收录于专栏:前端之攻略前端之攻略

查看效果

版本选择

采用的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({});

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 查看效果
  • 版本选择
  • 需要引用的CSS与js
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档