Home > Article > Web Front-end > bootstrap-table implements server-side paging function
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!