BootstrapTable固定头和底部

• 2019 年 10 月 7 日
• 筆記

查看效果

版本选择

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

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