html程式碼：

<table id="docDateTable" class="table table-hover table-bordered" style="color: #000000">
    <thead style="background-color: white">
        <tr>
            <th data-field="name" data-valign="middle" data-align="center">醫生姓名</th>
            <th data-field="mobilephone"
 
 data-valign="middle" data-align="center">手機號碼</th>
            <th data-field="sex" data-valign="middle" data-align="center">性別</th>
            <th data-field=institutionname data-valign="middle" data-align="center">醫院</th>
            <th data-field="jobtitlename"
 
 data-valign=“middle" data-align="center">職稱</th>
            <th data-field="registertime" data-valign=“middle" data-align="center">註冊時間</th>
            <th data-field="cityname" data-valign=“middle" data-align="center">所在城市</th>

        </tr>
    </thead>
</table>
 

js程式碼：

$('#docDateTable').bootstrapTable({
        sortable: false,                     //是否啟用排序
        sortOrder: "asc",                   //排序方式
        /* clickToSelect: true,                //是否啟用點選選中行
        height: 500,                        //行高，如果沒有設定height屬性，表格自動根據記錄條數覺得表格高度 */
        showColumns: true,                  //是否顯示所有的列
        data: docData
    });

引入需要的檔案之後，我們最重要的就是定義一個空的table，如上的

在js裡面初始化的方式來使用table元件：

html程式碼：

<table id="docDateTable" class="table table-hover table-bordered" style="color: #000000">
</table>

js程式碼：

$('#docDateTable').bootstrapTable({
        sortable: false,                     //是否啟用排序
        sortOrder: "asc",                   //排序方式
        /* clickToSelect: true,                //是否啟用點選選中行
        height: 500,                        //行高，如果沒有設定height屬性，表格自動根據記錄條數覺得表格高度 */
        showColumns: true,                  //是否顯示所有的列
        columns: [{
            field: 'name',
            title: '醫生姓名',
            visible: true
        }, {
            field: 'mobilephone',
            title: '手機號碼',
            visible: true  
        },
        {
            field: 'institutionname',
            title: '醫院',
            visible: false
        },{
            field: 'sex',
            title: '性別',
            visible: false
        }, {
            field: 'jobtitlename',
            title: '職稱',
            visible: false
        },{
            field: 'registertime',
            title: '註冊時間',
            visible: true
        }, {
            field: 'cityname',
            title: '所在城市',
            visible: false
        }],
        data: docData
    });

js中初始化表格與在html中初始化不同之處在於：在js中給column進行了定義，例如field對應著html中的name屬性，title就是列名，最後初始化的時候會將docData中的字串按照相應的列名進行存放。完成表格內容的填充。

其中需要注意的屬性是visible，這個屬性一般與showColumns屬性結合使用，當visible為false的時候，初始化結束的表格將不會有該列。但是如果我們想要再將這一列顯示的時候就要用到：showColumns屬性。當showColumns為true的時候，會在表格上方產生一個下拉框，如圖所示：

showColumns為false的時候就會隱藏。

在使用這個外掛的時候還有一個比較嚴重的問題:

這個圖片上問題不是很明顯，有些情況會導致內容和列名出現很大的偏差，即列對齊出現問題，這是由於js中的height屬性導致的，具體原因我也不清楚。

下面附上轉載的bootstrapTable的一些屬性解釋：

$('#tb_departments').bootstrapTable({
            url: '/Home/GetDepartment',         //請求後臺的URL（*）
            method: 'get',                      //請求方式（*）
            toolbar: '#toolbar',                //工具按鈕用哪個容器
            striped: true,                      //是否顯示行間隔色
            cache: false,                       //是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性（*）
            pagination: true,                   //是否顯示分頁（*）
            sortable: false,                     //是否啟用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//傳遞引數（*）
            sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）
            pageNumber:1,                       //初始化載入第一頁，預設第一頁
            pageSize: 10,                       //每頁的記錄行數（*）
            pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）
            search: true,                       //是否顯示錶格搜尋，此搜尋是客戶端搜尋，不會進服務端，所以，個人感覺意義不大
            strictSearch: true,
            showColumns: true,                  //是否顯示所有的列
            showRefresh: true,                  //是否顯示重新整理按鈕
            minimumCountColumns: 2,             //最少允許的列數
            clickToSelect: true,                //是否啟用點選選中行
            height: 500,                        //行高，如果沒有設定height屬性，表格自動根據記錄條數覺得表格高度
            uniqueId: "ID",                     //每一行的唯一標識，一般為主鍵列
            showToggle:true,                    //是否顯示詳細檢視和列表檢視的切換按鈕
            cardView: false,                    //是否顯示詳細檢視
            detailView: false,                   //是否顯示父子表
            columns: [{
                checkbox: true
            }, {
                field: 'Name',
                title: '部門名稱'
            }, {
                field: 'ParentName',
                title: '上級部門'
            }, {
                field: 'Level',
                title: '部門級別'
            }, {
                field: 'Desc',
                title: '描述'
            }, ]
        });