­

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