Bootstrap Table 是一款基於bootstrap封裝的表格組件,使用起來比較方便。官方文檔對服務器端分頁表述不是很清楚,查了它的demo,看到接口返回的數據,能夠參考一下他的網頁源碼。此網頁源碼定製性比較強,基本的使用不須要這麼複雜,能夠參考下面的例子進行使用,若是有必要再看官網demo的源碼再深刻使用。html
前端的基本設置前端
<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字段必需要有才能自動分頁 bootstrap
{ "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>" } } }