基于Bootstrap的輕量級表格插件Bootstrap Table只需簡單的配置，就可以擁有強大的支持固定表頭、單/復選、排序、分頁、搜索及自定義表頭等功能，更好的提高開發效率和減少開發時間。

1、插件描述：Bootstrap Table顯示數據表格格式,提供了豐富的支持,單選框、復選框、排序、分頁等，插件下載。

2、特點：

基于Bootstrap 3開發（同時支持 Bootstrap 2）

響應式界面

固定表頭

完全可配置

支持data屬性

顯示/隱藏列

顯示/隱藏表頭

使用AJAX獲取JSON數據

點擊表頭可簡單的進行排序

支持自定義列顯示

支持單/復選

強大的分頁功能

支持名片布局

支持多語言

3、使用方法：

1）、在html頁面的head標簽中引入Bootstrap庫（假如你的項目還沒使用）和bootstrap-table.css。

<link rel="stylesheet" href="bootstrap.min.css"><link rel="stylesheet" href="bootstrap-table.css">

2）、在head標簽或者在body標簽閉合前（比較推薦）引入jQuery庫和Bootstrap庫（假如你的項目還沒使用）和bootstrap-table.js。

<script src="jquery.min.js"></script><script src="bootstrap.min.js"></script> <script src="bootstrap-table.js"></script>

3）、指定數據源，這里有兩種方式
方式1：通過data屬性標簽
在一個普通的表格中設置data-toggle="table"可以在不寫JavaScript的情況下啟用Bootstrap Table。

<table data-toggle="table" data-url="data.json">   <thead>    ...    </thead>  </table>

方式2：通過JavaScript設置數據源
通過JavaScript來啟用帶有id屬性的Table。

$('#table').bootstrapTable({   url: 'data.json'   });:

4、Bug描述：

用標簽屬性方式設置字段formatter時，發現沒有效果，圖片不清楚，大家可以直接下載實例進行研究，下載地址。
如：<th data-field="sex" data-formatter="format_sex">性別</th>
1)、原因：
bootstrap-table.js第399行，代碼中只判斷了formatter typeof 為function的情況
2)、解決辦法：
修改第399行代碼塊：
修改前

if (typeof that.header.formatters[j] === 'function') { value = that.header.formatters[j](value, item);}

修改后：

if (typeof that.header.formatters[j] === 'function') {     value = that.header.formatters[j](value, item);    }else if(typeof that.header.formatters[j] === 'string') {     if(typeof window[that.header.formatters[j]] === 'function') {     value = window[that.header.formatters[j]](value, item);     }    }

如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：

Bootstrap學習教程

Bootstrap實戰教程

Bootstrap插件使用教程

以上就是為大家分享的Bootstrap Table使用方法，希望對大家熟練掌握Bootstrap Table使用方法有所幫助。