Bootstrap table 伺服器端分頁示例
<tableid="test-table"class="col-xs-12"data-toolbar="#toolbar">
function initTable(){
$('#test-table').bootstrapTable({
method: 'get',
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: false, //是否啟用排序
sortOrder: "asc", //排序方式
pageNumber:1, //初始化載入第一頁，預設第一頁
pageSize: 10, //每頁的記錄行數（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*）
url: "${
queryParamsType:'', //預設值為 'limit' ,在預設情況下 傳給服務端的引數為：offset,limit,sort
// 設定為 '' 在這種情況下傳給伺服器的引數為：pageSize,pageNumber
queryParams: queryParams,//前端呼叫服務時，會預設傳遞上邊提到的引數，如果需要新增自定義引數，可以自定義一個函式返回請求引數
sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
//search: true, //是否顯示錶格搜尋，此搜尋是客戶端搜尋，不會進服務端，所以，個人感覺意義不大
strictSearch: true,
//showColumns: true, //是否顯示所有的列
//showRefresh: true, //是否顯示重新整理按鈕
minimumCountColumns: 2, //最少允許的列數
clickToSelect: true, //是否啟用點選選中行
searchOnEnterKey: true,
columns: [{
field: 'id',
title: 'id',
align: 'center'
}, {
field: 'testkey',
title: '測試標識',
align: 'center'
}, {
field: 'testname',
title: '測試名字',
align: 'center'
},{
field: 'id',
title: '操作',
align: 'center',
formatter:function(value,row,index){
//通過formatter可以自定義列顯示的內容
//value：當前field的值，即id
//row：當前行的資料
var a = '<a href="" >測試</a>';
}
}],
pagination:true
});
}
//請求服務資料時所傳引數 function queryParams(params){ return{ //每頁多少條資料 pageSize: params.pageSize, //請求第幾頁 pageNumber:params.pageNumber,
//自定義的引數
module:$('#module').val(),
tblName:$('#tblName').val()
}
}
@RequestMapping(value="/listByPage",method = {RequestMethod.GET,RequestMethod.POST}) @ResponseBody public JSONObject listByPage(@RequestBody Map<String, String> param) throws Exception{ JSONObject jsonObject = new JSONObject(); Page page = new Page(); page.setPageSize(Integer.valueOf(param.get("pageSize")));page.setCurrentPage(Integer.valueOf(param.get("pageNumber")));Page pageData = getService().selectPage(XXX, page);jsonObject.put("rows",pageData.getResult()); jsonObject.put("total",pageData.getTotalCount());return jsonObject; }
幾點注意
1、queryParamsType預設值為'limit'，不設定就是預設值。所以必須設定，可以是queryParamsType:''
2、根據queryParamsType值的不同，設定分頁引數屬性。queryParamsType的型別必須和分頁引數名稱匹配，否則取不到值