在GitHub上Bootstrap-table的源碼地址是：https://github.com/wenzhixin/bootstrap-table

Bootstrap-table的文檔地址：http://bootstrap-table.wenzhixin.net.cn/

Bootstrap-table的各種樣例：https://github.com/wenzhixin/bootstrap-table-examples

Bootstrap-Table顯示數據到表格的方式有兩種，一種是客戶端（client）模式，一種是服務器（server）模式。

　　所謂客戶端模式，指的是在服務器中把要顯示到表格的數據一次性加載出來，然後轉換成JSON格式傳到要顯示的界面中，客戶端模式較為簡單，它是把數據一次性加載出來放到界面上，然後根據你設置的每頁記錄數，自動生成分頁。當點擊第二頁時，會自動加載出數據，不會再向服務器發送請求。同時用戶可以使用其自帶的搜索功能，可以實現全數據搜索。對於數據量較少的時候，可以使用這個方法。

　　所謂服務器模式，指的是根據設定的每頁記錄數和當前要顯示的頁碼，發送數據到服務器進行查詢，然後再顯示到表格中。該方法可以根據用戶的需要動態的加載數據，節省了服務器的資源，但是不能使用其自帶的全數據搜索功能。

Bootstrap-table是基於Boostrap開發的插件，因此使用的時候，需要引入Bootstrap的腳本和樣式。

如果我們項目中沒有引入相關的文件，則需要引入這些樣式和腳本文件，如下所示。

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

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

不過以上內容，在我們開發項目的時候都肯定有的了，所以我們還是把中心放到使用這個插件所需要的引入文件上來。

CSS文件引入

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

腳本文件引入

<script src="bootstrap-table.js"></script>
<--漢化文件，放在 bootstrap-table.js 後面-->
<script src="bootstrap-table-zh-CN.js"></script>

最近接觸一個NB插件，Bootstrap table 沒做過前端的表示對table的印象還只停留在html的table標簽那一套，用過bootstrap table之後不得不說真是牛X。

bootstrap-table在頁面中的使用，可以分為兩種，一種是純粹用HTML5的寫法，通過data-*的方式指定各種屬性設置，一種是HTML+JS方式實現彈性設置。

如果我們采用HTML5標識的方式初始化HTML代碼，則是下面的代碼。

<table data-toggle="table" data-url="data1.json">
    <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
    </thead>
</table>

如果我們采用JS代碼方式來初始化表格插件，那麽只需要在HTML上聲明一個表格對象即可，如下代碼。

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

然後簡單的JS代碼初始化如下所示

$(‘#table‘).bootstrapTable({
    url: ‘data1.json‘,
    columns: [{
        field: ‘id‘,
        title: ‘Item ID‘
    }, {
        field: ‘name‘,
        title: ‘Item Name‘
    }, {
        field: ‘price‘,
        title: ‘Item Price‘
    }, ]
});

不過實際上我們使用 bootstrap-table的JS配置功能肯定比這個復雜很多，下面界面效果是實際表的數據展示。

服務器分頁/客戶端分頁的轉換，table刷新

bootstrap默認是客戶端分頁 ，可通過html標簽

data-side-pagination:"client"

或者js中的

sidePagination: ‘server‘

指定。註意，這兩種後臺傳過來的json數據格式也不一樣
client : 正常的json array格式 [{},{},{}]
server： {“total”:0,”rows”:[]} 其中total表示查詢的所有數據條數，後面的rows是指當前頁面展示的數據量。

有事需要根據情況改變分頁方式，就要用到Methods中的
‘refreshOptions’ //設置更新時候的options
‘refresh’ //設置更新時的 url ,query(往後臺傳參數)

Bootstrap table的一些簡單使用總結