bootstrap-table implémente la fonction de pagination côté serveur

Cette fois, je vous apporte une bootstrap-table pour implémenter une fonction de pagination côté serveur, et une table d'amorçage pour implémenter une pagination côté serveur Notes Il y en a lesquels, voici des cas pratiques, regardons.

Récemment, le front-end utilise le plug-in de table d'amorçage. La pagination côté client ne fonctionne pas bien si la quantité de données est importante, donc le côté serveur est utilisé pour paginer de grandes quantités de données. . Commençons le code

Front-end

Tout d’abord, jetons un coup d’œil aux paramètres de pagination par défaut transmis par la table bootstrap

• le décalage commence à partir de quel indice

• limiter le nombre de limites par page

Il peut être différent de nos paramètres de pagination par défaut, nous avons donc décidé de le modifier. Les paramètres passés en arrière-plan sont

• . page page À partir de 0

• taille Le numéro affiché sur chaque page

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

En coulisses

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

Points à noter

Les paramètres reçus par la table bootstrap doivent inclure le total et les lignes. Le total est la quantité totale et les lignes sont la quantité par page

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. veuillez faire attention aux autres sites Web chinois php.

Lecture recommandée :

Angularjs implémente le téléchargement d'un aperçu d'image

vue utilise axios et l'encapsulation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!