Heim > Web-Frontend > js-Tutorial > Hauptteil

Bootstrap-Table implementiert die serverseitige Paging-Funktion

php中世界最好的语言
Freigeben: 2018-04-18 14:10:12
Original
2998 Leute haben es durchsucht

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”;
    });
    Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!