Wie Bootstrap-Table Server-Paging implementiert

In diesem Artikel wird hauptsächlich das Beispiel einer Bootstrap-Tabelle zur Implementierung von Server-Paging (Frühlingshintergrund) vorgestellt, das einen gewissen Referenzwert hat.

In letzter Zeit wird das Front-End verwendet Beim Bootstrap-Tabellen-Plug-in eignet sich das clientseitige Paging nicht für die Interaktion, wenn die Datenmenge groß ist. Daher wird das serverseitige Paging für das Paging großer Datenmengen verwendet. Beginnen wir mit dem Code

Frontend

Werfen wir zuerst einen Blick darauf, was der Standard-Paging-Parameter der Bootstrap-Tabelle ist

• Von welchem ​​Index aus beginnt der Offset? >

• Limit Die Anzahl der Limits pro Seite >
  kann von unseren Standard-Paging-Parametern abweichen, daher haben wir beschlossen, sie zu ändern. Die an den Hintergrund übergebenen Parameter sind

Seite beginnt bei 0

• Größe Die auf jeder Seite angezeigte Zahl

Backend

  $('#' + tableId).bootstrapTable({

     queryParams: function (e) { 
      var param = { 
       size: e.limit, 
       page: (e.offset / e.limit),//不需要+1 
       
      }; 
      return param; 
     },
     sidePagination:“server”;
});

Hinweise

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

Die von der Bootstrap-Tabelle empfangenen Parameter müssen die Summe enthalten und Zeilen. Total ist die Gesamtmenge und Zeilen ist die Menge pro Seite

Zeigen Sie mir die Darstellungen

Das obige ist der detaillierte Inhalt vonWie Bootstrap-Table Server-Paging implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!