1.bootstrap-table客户端分页
客户端分页的数据源可以是后台服务器端传递过来(一次性获取,即获取所有你需要的数据),点击页码不再请求后台,利用页面缓存分页;cache : true, //是否使用缓存,默认为true
$('#TableId').bootstrapTable({ url : '/adjustQueryController/getOAbudgetList.json', //请求后台的URL(*) method: 'GET', sidePagination : "client", //分页方式:client客户端分页,server服务端分页(*) pagination : true, //是否显示分页(*) queryParams : queryParams, //分页 pageSize : 10, //每页显示的记录数 pageNumber : 1, //当前第几页 pageList : [ 10, 25, 50, 100 ], //记录数可选列表 responseHandler: function(data){ return data.rows; //约定rows }, columns : [ {checkbox : true}, {title: '调整类型', field: 'adjustType', align: 'center'}, {title: '申请日期', field: 'applyDate', align: 'center'}, {title: '单据编号', field: 'processCode', align: 'center'}, {title: '调整组织', field: 'applyOrganization', align: 'center'}, {title: '调整部门', field: 'applyDepartment', align: 'center'}, {title: '是否涉及人力', field: 'flag', align: 'center'} ] });
@RequestMapping(value = "/getOAbudgetList", method = { RequestMethod.GET }) public String getOAbudgetList(HttpServletRequest request, HttpServletResponse response){ String processCode = request.getParameter("processCode"); String adjustType = request.getParameter("adjustType"); String adjOrg = request.getParameter("adjOrg"); String adjDepart = request.getParameter("adjDepart"); String adjSubject = request.getParameter("adjSubject"); List<Map<String, String>> pageList = oaAdjustQueryService.findPageList(processCode,adjustType,adjOrg,adjDepart,adjSubject); int total = pageList.size(); String jsonStr = JSONArray.fromObject(pageList).toString(); String jsonString="{"total":"+total+","rows":"+jsonStr+"}"; //约定rows return jsonString; }
2.bootstrap-table服务端分页
服务端分页的数据源是后台服务器端传递过来的,每点击一次页码,将page、size发送给后台查询,返回页面数据
method: 'POST', contentType : "application/x-www-form-urlencoded", //必须有 sidePagination : "server", //分页方式:client客户端分页,server服务端分页(*) pagination : true, //是否显示分页(*) queryParams : queryParams, //分页 pageSize : 10, //每页显示的记录数 pageNumber : 1, //当前第几页 pageList : [ 10, 25, 50, 100 ], //记录数可选列表
queryParams : queryParams, //分页参数
responseHandler : responseHandler,//响应数据
cache : false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*),区别客户端分页
function queryParams(params) { var batchId=[[${batchId}]]; //thymeleaf 页面获取单个数据 var str = { "page" : this.pageNumber, "pageSize" : this.pageSize, //需要传递page、size "filter" : { "filters" : [{ "field" : "budgetBatchId", "value" : batchId }] } }; var baseData = JSON.stringify(str); var param = { models : baseData } return param; }
function responseHandler(res) { //spring data JPA中findAll()条件查询分页返回
if (res) {
return {
"rows" : res.list,
"total" : res.total
};
} else {
return {
"rows" : [],
"total" : 0
};
}
};
------------------------
学习链接: https://blog.csdn.net/mhmyqn/article/details/25561535