1.客户端分页
<table id="contentTable" class="table table-striped table-bordered table-condensed">
</table>
<script src="bootstrap-3.3.7/js/jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="bootstrap-table/bootstrap-table.js"></script>
<script src="bootstrap-table/bootstrap-table-zh-CN.js"></script>
<link rel="stylesheet" href="bootstrap-table/bootstrap-table.css">
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<script>
//初始化table
function createTable(datas){
$('#contentTable').bootstrapTable({
method: 'get',
cache: false,
height: 500,
striped: true,
pagination: true,
pageSize: 10,
pageNumber:1,
pageList: [10, 20, 50, 100, 200, 500], sidePagination:'client',
search: true,
showColumns: true,
showRefresh: false,
showExport: true,
exportTypes: ['csv','txt','xml'],
search: true,
clickToSelect: true,
columns:
[
{field:"id",title:"编号",align:"left",valign:"middle",sortable:"true"},
{field:"name",title:"名字",align:"left",valign:"middle",sortable:"true"},
{formatter:"operateFormatter",title:"操作",align:"center",valign:"middle",sortable:"true",events: window.operateEvents}
],
data:datas
});
}
//自定义内容
function operateFormatter(value, row, index){
return "<a>删除</a>"
}
var arr=[];
for(var i=0;i<100;i++){
arr[i]={"id":"ID"+i,"name":"name"+i};
}
createTable(arr);
</script>
2.服务端分页
服务端返回数据格式
{
"total":100,
"rows":[
{"id":1,"name":"a"},
{"id":2,"name":"b"}
]
}
页面配置
<table id="table" data-toggle="table" data-url="jsonurl"
data-pagination="true" data-side-pagination="server"
data-page-list="[10, 25, 50, 100, ALL]" data-height="608"
data-query-params="queryParams">
<thead>
<tr>
<th data-field="id">编号</th>
<th data-field="name">名字</th>
<th data-formatter="operateFormatter"
data-events="window.operateEvents">操作</th>
</tr>
</thead>
</table>
data-query-params 对应数据接口所需要的参数,如下
function queryParams(params) {
return {
//每页多少条数据
limit : params.limit,
//请求第几页
offset : params.offset
}
}