官網介紹：
基於 Bootstrap 的 jQuery 表格外掛，通過簡單的設定，就可以擁有強大的單選、多選、排序、分頁，以及編輯、匯出、過濾（擴充套件）等等的功能。

主要功能

• 支援 Bootstrap 3 和 Bootstrap 2
• 自適應介面
• 固定表頭
• 非常豐富的配置引數
• 直接通過標籤使用
• 顯示/隱藏列
• 顯示/隱藏表頭
• 通過 AJAX 獲取 JSON 格式的資料
• 支援排序
• 格式化表格
• 支援單選或者多選
• 強大的分頁功能
• 支援卡片檢視
• 支援多語言
• 支援外掛

優點

• 學習成本較低，配置簡單，文件齊全
• 跟Bootstrap無縫銜接，整體風格一致，也便於二次開發
• 開發者活躍，Github定期維護

開始使用

• 1、在網頁的head標籤裡插入下面的程式碼

<!-- 引入bootstrap樣式 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap-table樣式 -->
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">

<!-- jquery -->
 

<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- bootstrap-table.min.js -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script
 
>
<!-- 引入中文語言包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

• 2、在頁面body程式碼塊裡定義表格展示的區域

<table id="table"></table>

• 3、使用data屬性來渲染表格 （簡單方式）

<table data-toggle="table" data-url="data1.json">
    <thead>
        <tr>
            <th data-field="id">序號</th>
            <th data-field="name">名稱</th>
            <th data-field="price">價格</th>
        </tr>
    </thead>
</table>

• 4、編寫JavaScript程式碼渲染表格 （推薦使用這種方式，程式碼閱讀和擴充套件更為方便）

在網頁程式碼最下面插入js指令碼，內容如下：

$("#table").bootstrapTable({ // 對應table標籤的id
      url: "<%=request.getContextPath()%>/api/getDataList.do", // 獲取表格資料的url
      cache: false, // 設定為 false 禁用 AJAX 資料快取， 預設為true
      striped: true,  //表格顯示條紋，預設為false
      pagination: true, // 在表格底部顯示分頁元件，預設false
      pageList: [10, 20], // 設定頁面可以顯示的資料條數
      pageSize: 10, // 頁面資料條數
      pageNumber: 1, // 首頁頁碼
      sidePagination: 'server', // 設定為伺服器端分頁
      queryParams: function (params) { // 請求伺服器資料時傳送的引數，可以在這裡新增額外的查詢引數，返回false則終止請求

          return {
              pageSize: params.limit, // 每頁要顯示的資料條數
              offset: params.offset, // 每頁顯示資料的開始行號
              sort: params.sort, // 要排序的欄位
              sortOrder: params.order, // 排序規則
              dataId: $("#dataId").val() // 額外新增的引數
          }
      },
      sortName: 'id', // 要排序的欄位
      sortOrder: 'desc', // 排序規則
      columns: [
          {
              checkbox: true, // 顯示一個勾選框
              align: 'center' // 居中顯示
          }, {
              field: 'code', // 返回json資料中的name
              title: '編號', // 表格表頭顯示文字
              align: 'center', // 左右居中
              valign: 'middle' // 上下居中
          }, {
              field: 'name',
              title: '名稱',
              align: 'center',
              valign: 'middle'
          }, {
              field: 'calcMode',
              title: '計算方式',
              align: 'center',
              valign: 'middle',
              formatter: function (value, row, index){ // 單元格格式化函式
                  var text = '-';
                  if (value == 1) {
                      text = "方式一";
                  } else if (value == 2) {
                      text = "方式二";
                  } else if (value == 3) {
                      text = "方式三";
                  } else if (value == 4) {
                      text = "方式四";
                  }
                  return text;
              }
          }, {
              title: "操作",
              align: 'center',
              valign: 'middle',
              width: 160, // 定義列的寬度，單位為畫素px
              formatter: function (value, row, index) {
                  return '<button class="btn btn-primary btn-sm" onclick="del(\'' + row.stdId + '\')">刪除</button>';
              }
          }
      ],
      onLoadSuccess: function(){  //載入成功時執行
            console.info("載入成功");
      },
      onLoadError: function(){  //載入失敗時執行
            console.info("載入資料失敗");
      }

})

元件文件

一、表格引數

使用方式如下：

$("#table").bootstrapTable({
      method: "post",
      url: "獲取後臺資料的url",
      ... ...

});      

二、列引數

針對具體每一列展示的設定引數，最常用的為 title 和 field， 它們分別設定了表頭顯示文字和對應要顯示的每項資料

示例程式碼：

$("#table").bootstrapTable({
      method: "post",
      url: "獲取後臺資料的url",
      columns: [
          {
              checkbox: true
          }, {
              title: '標準編號'
              field: 'stdCode'
          },
          ... ...
      ]
});      

三、事件

給表格繫結事件，程式碼：

$("#table").bootstrapTable({
      method: "post",
      url: "獲取後臺資料的url",
      onLoadSuccess: function(){  //載入成功時執行
            console.info("載入成功");
      },
      onLoadError: function(){  //載入失敗時執行
            console.info("載入資料失敗");
      }
});