Bootstrap Table Examples

Bootstrap Table 是一款基於bootstrap封裝的表格組件，使用起來比較方便。官方文檔對服務器端分頁表述不是很清楚，查了它的demo，看到接口返回的數據，能夠參考一下他的網頁源碼。此網頁源碼定製性比較強，基本的使用不須要這麼複雜，能夠參考下面的例子進行使用，若是有必要再看官網demo的源碼再深刻使用。

前端的基本設置

<table id="exampleTableEvents" data-mobile-responsive="true"
                                   data-toolbar="#toolbar"
                                   data-search="true"
                                   data-show-refresh="true"
                                   data-show-toggle="false"
                                   data-show-columns="false"
                                   data-show-export="true"
                                   data-detail-view="false"
                                   data-detail-formatter="detailFormatter"
                                   data-minimum-count-columns="2"
                                   data-pagination="true"
                                   data-id-field="id"
                                   data-page-list="[30, 60, 120, ALL]"
                                   data-show-footer="true"
                                   data-show-header="true"
                                   data-toolbar-align="left"
                                   data-page-size="30"
                                   data-side-pagination="server"
                                   data-url="http://baidu.com/getdata.url"
                                   data-response-handler="responseHandler"
                                   data-query-params="queryParams"
                            >
                                <thead>
                                <tr>
                                    <th data-checkbox="true"><input name="btSelectAll" type="checkbox"></th>
                                    <th data-field="id">ID</th>
                                    <th data-field="title">標題</th>
                                    <th data-field="id" data-formatter="commonFormatter" data-events="commonEvents">操做
                                    </th>
                                </tr>
                                </thead>

                                <tfoot>
                                <tr>
                                    <td colspan="20">
                                        <button class="btn btn-sm btn-success" onclick="promoteToAppHome(this)">推薦首頁</button>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
<script>
//封裝接口返回的數據給bootstrap table使用
    function responseHandler(res) {
//        $.each(res.rows, function (i, row) {
//            row.state = $.inArray(row.id, selections) !== -1;
//        });
        return {total:res.data.pagination.total,rows:res.data.items};
    }

//自定義分頁參數有補充其餘參數
    function queryParams(params) {
//        console.log(params);
//        will output:{search: undefined, sort: undefined, order: "asc", offset: 0, limit: 30}
        return {size:params.limit, p:Math.ceil(params.offset/params.limit+1), search:'', sort:'', order:'desc'}
    }
</script>

服務端分頁返回的數據格式，注意total字段必需要有才能自動分頁 

{
    "success": true,
    "msg": "",
    "code": 200,
    "data": {
        "items": [],
        "pagination": {
            "page": 2,
            "size": 99999,
            "total_pages": 1,
            "total": "42",
            "page_str": "<nav><ul class=\"pagination\"><li><a class=\"prev\">共 42 條記錄</a></li>     </ul></nav>"
        }
    }
}