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