最近前端都是用的bootstrap table這個插件，客戶端分頁的話數據量一多交互不好，所以大數據量的分頁都用服務器端，下面開始擼代碼
前端
首先看下bootstrap table 默認傳的分頁參數是什么
- offset 從哪個下標開始
- limit 每頁限制的數量
可能跟我們的默認分頁參數不大一樣吧，所以決定改造一下,傳到后臺的參數為
- page 第幾頁 從0開始
- size 每頁顯示的數量
$('#' + tableId).bootstrapTable({
queryParams: function (e) {
var param = {
size: e.limit,
page: (e.offset / e.limit),//不需要+1
};
return param;
},
sidePagination:“server”;
});
后臺
@ApiOperation(value = "獲取企業列表，支持分頁", notes = "json方法獲取用戶列表")
@ApiImplicitParams({ @ApiImplicitParam(name = "name", value = "企業名稱", required = true, dataType = "string"),
@ApiImplicitParam(name = "beginTime", value = "開始時間", required = true, dataType = "string") })
@RequestMapping(value="/list",method=RequestMethod.POST)
@ResponseBody
public Map<String,Object> list(@RequestParam Map<String,Object> map,@RequestParam(required = false) String name, @RequestParam(required = false) String beginTime, @RequestParam(required = false) String endTime, @RequestParam(required = false) Integer deptid){
List<Map<String,Object>> list = new ArrayList<>();
//當前頁數
int page = map.get("page")== null ? 0 : Integer.parseInt(map.get("page").toString());
// 每頁行數
int size = map.get("size") == null ? 10 : Integer.parseInt(map.get("size").toString());
Order order = new Order(Direction.ASC,"id");
Order order1 = new Order(Direction.DESC,"createTime");
List<Order> orders = new ArrayList<Order>();
orders.add(order1);//先按照createTime 降序排序 然后按照id升序
orders.add(order);
Sort sort = new Sort(orders);
Pageable pageable = new PageRequest(page,size,sort);
Page<Company> companyPages = null;
if(StringKit.isEmpty(name)){
companyPages = companyService.companyDao.findAll(pageable);
}else{
companyPages = companyService.companyDao.findByNameLike(name,pageable);
}
List<Company> companyList = companyPages.getContent();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
for(Company company:companyList){
Map<String,Object> mapTemp = BeanKit.describe(company);
mapTemp.put("createTime", sdf.format(company.getCreateTime()));
list.add(mapTemp);
}
Map<String,Object> data = new HashMap<String,Object>();
data.put("total", companyPages.getTotalElements());
data.put("rows", list);
return data;
}
注意點
bootstrap table接收的參數中必須要有total和rows，total就是總數量，rows是每頁的數量
展示一下效果圖吧
image.png
