bootstrap-table实现服务器分页的示例 (spring 后台)


Posted in Javascript onSeptember 01, 2017

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

前端

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

  • offset 从哪个下标开始
  • limit 每页限制的数量

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

  • page 第几页 从0开始
  • size 每页显示的数量
$('#' + tableId).bootstrapTable({

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

后台 

@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实现服务器分页的示例 (spring 后台)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 简单导航实现代码
Sep 11 Javascript
一些mootools的学习资源
Feb 07 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
JS中的三个循环小结
Jun 20 Javascript
three.js 入门案例详解
Jan 23 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 #jQuery
基于Vue.js 2.0实现百度搜索框效果
Dec 28 #Javascript
JavaScript闭包的简单应用
Sep 01 #Javascript
写给vue新手们的vue渲染页面教程
Sep 01 #Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 #Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 #Javascript
JavaScript中数组常见操作技巧
Sep 01 #Javascript
You might like
深入解析php之apc
2013/05/15 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
python脚本实现查找webshell的方法
2014/07/31 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
python  logging日志打印过程解析
2019/10/22 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
使用python实现学生信息管理系统
2021/02/25 Python
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
写自荐信要注意什么
2013/12/26 职场文书
网上签名寄语活动留言
2014/01/18 职场文书
酒店个人求职信范文
2014/01/25 职场文书
大学生暑期实践感言
2014/02/26 职场文书
公务员诚信承诺书
2014/05/26 职场文书
家长会标语
2014/06/24 职场文书
英语课外活动总结
2014/08/27 职场文书
员工保密协议书
2014/09/27 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书