最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

bootstrap-table如何实现服务器分页

来源:动视网 责编:小采 时间:2020-11-27 20:13:52
文档

bootstrap-table如何实现服务器分页

bootstrap-table如何实现服务器分页:本篇文章主要介绍了bootstrap-table实现服务器分页的示例 (spring 后台),具有一定的参考价值,有兴趣的可以了解一下最近前端都是用的bootstrap table这个插件,客户端分页的话数据量一多交互不好,所以大数据量的分页都用服务器端,下面开始撸代码前端首先
推荐度:
导读bootstrap-table如何实现服务器分页:本篇文章主要介绍了bootstrap-table实现服务器分页的示例 (spring 后台),具有一定的参考价值,有兴趣的可以了解一下最近前端都是用的bootstrap table这个插件,客户端分页的话数据量一多交互不好,所以大数据量的分页都用服务器端,下面开始撸代码前端首先
 本篇文章主要介绍了bootstrap-table实现服务器分页的示例 (spring 后台),具有一定的参考价值,有兴趣的可以了解一下

最近前端都是用的bootstrap table这个插件,客户端分页的话数据量一多交互不好,所以大数据量的分页都用服务器端,下面开始撸代码

前端

首先看下bootstrap table 默认传的分页参数是什么

  • offset 从哪个下标开始

  • limit 每页的数量

  • 可能跟我们的默认分页参数不大一样吧,所以决定改造一下,传到后台的参数为

  • page 第几页 从0开始

  • size 每页显示的数量

  • 后台

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

    注意点

    bootstrap table接收的参数中必须要有total和rows,total就是总数量,rows是每页的数量

    展示一下效果图吧

    文档

    bootstrap-table如何实现服务器分页

    bootstrap-table如何实现服务器分页:本篇文章主要介绍了bootstrap-table实现服务器分页的示例 (spring 后台),具有一定的参考价值,有兴趣的可以了解一下最近前端都是用的bootstrap table这个插件,客户端分页的话数据量一多交互不好,所以大数据量的分页都用服务器端,下面开始撸代码前端首先
    推荐度:
    标签: 实现 服务器 分页
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top