bootstrap-table是基於bootstrap的將資料填充為表格的一款外掛。功能比較強大，而且也很完善，如果你的專案打算用bootstrap，如果有資料展示方面的需求，它是一個很好的選擇。這個是它的官網，下面介紹一下它的基本用法。

首先，引入依賴檔案：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>

<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
 

既然是基於bootstrap的，所以jQuery也是依賴項，我在這沒有加，需要注意一下。

下一步就是需要一個根元素，讓外掛來填充它。

<table id="list-table"></table>

我們來呼叫一下外掛，讓它開始填充根元素。

       $('#list-table').bootstrapTable({
            url:'url',                         //這裡是你的請求地址
            method:'post',
            contentType:'application/x-www-form-urlencoded; charset=UTF-8',
            dataType: "json",//資料型別
            striped: true,                      //是否顯示行間隔色
            cache: false,
            sortOrder: "asc",                   //排序方式
            queryParams: _queryParams,          //傳遞引數（*）
            sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）
            pagination: true,                   //是否顯示分頁（*）
            pageNumber:1,                       //初始化載入第一頁，預設第一頁
            pageSize: 10,                       //每頁的記錄行數（*）
            pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）//是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性（*）
            toolbar:'#toolbar',
            showRefresh: true,                  //是否顯示重新整理按鈕
            showToggle:true,                    //是否顯示詳細檢視和列表檢視的切換按鈕
            cardView: false,                    //是否顯示詳細檢視
            minimumCountColumns: 2,             //最少允許的列數
            showColumns: true,                  //是否顯示所有的列
            responseHandler:_responseHandler,     //請求資料成功後，渲染表格前的方法
            uniqueId:'id',
            columns: [{
                checkbox: true                  //table每一行前邊都會有一個checkbox 
            }, {
                field: 'id',                    //table 需要展示的後臺欄位
                title: '編號'                   //後臺欄位的對應顯示文字，也就是table>head
            }]
        })
 

接下來處理我們上邊定義的這些回撥方法。

function _queryParams(params){

    return {
        start:0,
        length:10 
    }

}

這個是用來處理請求引數，return回去一個物件就是我們的請求引數。其中的params為我們配置項中的一些配置，比如我們開啟了pagination,而且定義了pageNumber、pageSize以後，params會返回offset(pageNumber)以及limit(pageSize)。

function _responseHandler(data){
        
        return{
            rows:data.result.data,
            total:data.result.recordsTotal
        }

}
 

這個是請求成功後處理為bootstrap-table可識別的格式，data為後臺返回的資料，rows就是你需要渲染的資料，total是後臺返回的資料總數。

下面是一些比較常用的方法：

目錄

表格重新整理

操作某一行

formatter(後臺資料處理)

這個可以定義在columns裡面，來處理後臺資料，變為我們需要的展示格式，例如：將後臺返回的地址包裹在a標籤裡。

columns:[{
   field:'link',
   title:'連結',
   formatter:function(value,row,index){
      return '<a href="'+value+'">連結</a>'
   }

}]

表格重新整理

$('#list-table').bootstrapTable("refresh");//這個適用於伺服器端載入表格，相當於重新請求並渲染了一次

$('#list-table').bootstrapTable("load",[]);//這個適用於靜態資料渲染

操作某一行

經常會有這樣的一些需求，我要刪除表格中的某一行，或者是修改，這時候可以在columns裡面加一個checkbox，然後通過，bootstrap-table返回選中的資料，對它進行處理。

$('#list-table').bootstrapTable('getSelections')