Home  >  Article  >  Web Front-end  >  bootstrap-table implements server-side paging function

bootstrap-table implements server-side paging function

php中世界最好的语言
php中世界最好的语言Original
2018-04-18 14:10:123029browse

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”;
    });

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;
}

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!

Recommended reading:

Angularjs implements image preview upload

vue uses axios and encapsulation

The above is the detailed content of bootstrap-table implements server-side paging function. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn