bootstrap-table implements server-side paging function-JS Tutorial-php.cn

bootstrap-table implements server-side paging function

php中世界最好的语言

Release： 2018-04-18 14:10:12

Original

2966 people have browsed it

This time I will bring you bootstrap-table to implement server-side paging function, bootstrap-table to implement server-side pagingNotesThere are Which ones, the following are practical cases, let’s take a look.

Recently, the front-end is using the bootstrap table plug-in. If the client-side paging is too large, the interaction will not be good, so the server-side is used for paging of large amounts of data. Let’s start the code

front end

First, let’s take a look at the default paging parameters passed by bootstrap table

Which index does offset start from
limit The number of limits per page

Maybe it’s different from our default paging parameters, so we decided to change it. The parameters passed to the background are

page Which page starts from 0
size The number displayed on each page

  $('#'+ tableId).bootstrapTable({
     queryParams:function(e) {
      varparam = {
       size: e.limit,
       page: (e.offset / e.limit),//不需要+1
      };
      returnparam;
     },
     sidePagination:“server”;
});

Copy after login

Backstage

@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
publicMap<String,Object> list(@RequestParamMap<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 =newArrayList<>();
 //当前页数
 intpage = map.get("page")==null?0: Integer.parseInt(map.get("page").toString());
 // 每页行数
 intsize = map.get("size") ==null?10: Integer.parseInt(map.get("size").toString());
 Order order =newOrder(Direction.ASC,"id");
 Order order1 =newOrder(Direction.DESC,"createTime");
 List<Order> orders =newArrayList<Order>();
 orders.add(order1);//先按照createTime 降序排序 然后按照id升序
 orders.add(order);
 Sort sort =newSort(orders);
 Pageable pageable =newPageRequest(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 =newSimpleDateFormat("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 =newHashMap<String,Object>();
  data.put("total", companyPages.getTotalElements());
  data.put("rows", list);
 returndata;
}

Copy after login

be careful

The parameters received by bootstrap table must include total and rows. Total is the total number and rows is the number of each page.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other php Chinese websites. related articles!