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>"
        }
    }
}