Bootstrap-Table implementiert die serverseitige Paging-Funktion

Dieses Mal bringe ich Ihnen eine Bootstrap-Tabelle zur Implementierung der serverseitigen Paging-Funktion und eine Bootstrap-Tabelle zur Implementierung der serverseitigen Paging HinweiseEs gibt Welche, die folgenden sind praktische Fälle, werfen wir einen Blick darauf.

Seit kurzem verwendet das Front-End das Bootstrap-Tabellen-Plug-in, das nicht gut funktioniert, wenn die Datenmenge groß ist, sodass die Serverseite zum Paging großer Datenmengen verwendet wird . Beginnen wir mit dem Code

Frontend

Werfen wir zunächst einen Blick auf die Standard-Paging-Parameter, die von der Bootstrap-Tabelle

• übergeben werden Der Offset beginnt mit dem Index

• begrenzt die Anzahl der Grenzwerte pro Seite

Es kann sich von unseren Standard-Paging-Parametern unterscheiden, daher haben wir beschlossen, es zu ändern. Die an den Hintergrund übergebenen Parameter sind

• Seite Seite Beginnend bei 0

• Größe Die auf jeder Seite angezeigte Zahl

•   $('#'+ 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;
}

Hinweis

Die von der Bootstrap-Tabelle empfangenen Parameter müssen „total“ und „rows“ die Gesamtzahl jeder Seite enthalten.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Bitte achten Sie auf andere chinesische PHP-Websites. Verwandte Artikel!

Empfohlene Lektüre:

Angularjs implementiert den Bildvorschau-Upload

vue verwendet Axios und Kapselung

Das obige ist der detaillierte Inhalt vonBootstrap-Table implementiert die serverseitige Paging-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!