廢話不多，直接發(fā)車！
API文檔：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

引入

<link rel="stylesheet" >
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.0/bootstrap-table.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.0/locale/bootstrap-table-zh-CN.min.js"></script>

實現(xiàn)

方式一：

無需編寫 JavaScript 啟用 bootstrap table，我們對普通的 table 設(shè)置 data-toggle="table" 即可。

<table  
    id="table"
    data-detail-view="true"
    data-toolbar="#toolbar"
    data-detail-formatter="detailFormatter"
    data-toggle="table"
    data-query-params="queryParams"
    data-url="data.json"
    data-side-pagination="server"
    data-pagination="true"
    data-page-list="[5, 10, 20, 50, 100, 200]"
>
    <thead>
    <tr>
        <th data-field="xx" data-formatter="batchFormatter" data-checkbox="true" data-width=30></th>
        <th data-field="name" data-align="left">用戶名</th>
        <th data-field="content" data-align="left" data-formatter="contentFormatter">內(nèi)容</th>
        <th data-field="xx" data-align="center"></th>
        <th data-field="xx" data-formatter="operateFormatter" data-align="center">操作</th>
    </tr>
    </thead>
</table>

詳解：在API里都可以找到，只寫幾個此處用到的

data-detail-view            //設(shè)置為 true 可以顯示詳細頁面。即表頭出現(xiàn)+，實現(xiàn)異步獲取數(shù)據(jù)
data-detail-formatter       //格式化詳細頁面的視圖，配合前一項輸出子列表
data-query-params           //請求服務(wù)器數(shù)據(jù)時，通過重寫參數(shù)的方式添加一些額外的參數(shù)
data-side-pagination        //設(shè)置在哪里進行分頁，可選值為 'client' 或者 'server'。設(shè)置 'server'時，必須設(shè)置服務(wù)器數(shù)據(jù)地址（url）或者重寫ajax方法
data-pagination             //設(shè)置是否顯示分頁條
data-formatter              //(value, row, index),格式化自定義輸出,用于處理超鏈接、代碼塊、圖片展示、表情轉(zhuǎn)義等
data-width                  //設(shè)置寬度，比如=100或者=20%，不設(shè)置為自適應(yīng)

方式二：

$('#table').bootstrapTable({
    url: '',
    rowStyle:rowStyle,                    //自定義行樣式 參數(shù)為：row:行數(shù)據(jù),index:行下標(biāo),返回值可以為class或者css 
    columns: [
        {
            field: 'state',
            checkbox: 'true',
            width: '30',
            align: 'center',
            formatter: 'batchFormatter'     //此處我用來隱藏一些數(shù)據(jù)方便多重異步加載
        },{
            field: 'name',
            title: '用戶名',
            width: '100',
            align: 'center'
        },{
            field: 'xx',
            title: 'xx',
            align: 'center'
        },{
            field: 'content',
            title: '內(nèi)容',
            formatter: "contentFormatter"   //代碼塊、表情轉(zhuǎn)義、圖片輸出等進行處理
        }{
            field: 'xx',
            title: '操作',
            formatter: "operateFormatter",
            align: 'center'
        },
    ],
    onLoadSuccess:function(data){
        //成功加載處理
    }
});

常用事件：

寫法有兩種，以單擊事件來舉例
一、可以直接寫在表格生成那，如上方的加載成功返回方法。

onClickRow:function (row,$element) {
    $('.info').removeClass('info');//移除class
    $($element).addClass('info');//添加class
}

二、jquery事件

$('#table').on('click-row.bs.table', function (row, $element) {
    $('.info').removeClass('info');//移除class
    $($element).addClass('info');//添加class
});  

onClickRow      click-row.bs.table      row,$element     當(dāng)用戶點擊某一行的時候觸發(fā)
onDblClickRow   dbl-click-row.bs.table  row,$element     雙擊
onCheckAll      check-all.bs.table      row              全選所有的行時
onUncheckAll    uncheck-all.bs.table    rows             當(dāng)用戶反選所有的行
onLoadSuccess   load-success.bs.table   data             遠程數(shù)據(jù)加載成功時觸發(fā)成功。
onLoadError     load-error.bs.table     status           遠程數(shù)據(jù)加載失敗時觸發(fā)成功。 
...api里都有自己要什么查什么

提供部分好用的：

頁面加載重置列表高度

$('#table').bootstrapTable('resetView', {
    height: $(window).height() - 140
});

搜索并返回第一頁。處理：第N頁搜索時依舊在本頁，此處直接返回第一頁即可，無需重復(fù)請求。(返回第一頁時自動帶入當(dāng)前搜索條件)

$('#search').click(function () {
    $('#table').bootstrapTable('selectPage',1);
});

翻頁時處理，我用來做保留展開設(shè)置了，例如前一頁我全部展開，翻頁后依舊保持此習(xí)慣

$('#table').on('page-change.bs.table', function () {
    rowSet();
});

展開詳細列時主列不可操作,用于多重樹列表

$('#table').on('expand-row.bs.table', function (index, row, $detail) {
    $expandTr = $(".detail-icon").eq(row).parent().parent();
    $expandTr.find("td:last>a").hide();
    $expandTr.find("td:eq(3),td:eq(4),td:eq(5)").css("color","transparent");
});

$('#table').on('collapse-row.bs.table', function (index, row, $detail) {
    $expandTr = $(".detail-icon").eq(row).parent().parent();
    $expandTr.find("td:last>a").show();
    $expandTr.find("td").css("color","green");
});

列表加載已讀信息變色處理

$('#table').on('post-body.bs.table', function () {
    //在表格 body 渲染完成后觸發(fā)。 
    browse(this);
});  

根據(jù)條件對當(dāng)前行配色

function rowStyle(row, index) {
    if (row['xxx'] == 0) {
        return {classes: 'info'}
    }else {
        return {classes: 'active'}
    }
    return {}
}

先到這里，后續(xù)遇到問題再繼續(xù)