Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie Bootstrap-Table Server-Paging implementiert

巴扎黑
Freigeben: 2017-09-02 13:47:37
Original
1555 Leute haben es durchsucht

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


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

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!

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!