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 相关文章推荐
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
js继承实现方法详解
Dec 16 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 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
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
python怎么判断素数
2020/07/01 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
python基于openpyxl生成excel文件
2020/12/23 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
考博自荐信
2013/10/25 职场文书
团支书的期末学习总结自我评价
2013/11/01 职场文书
毕业生简单求职信
2013/11/19 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
高三语文复习计划
2015/01/19 职场文书
庐山导游词
2015/02/03 职场文书
新闻通讯稿范文
2015/07/22 职场文书
《植树问题》教学反思
2016/03/03 职场文书
入党申请书格式
2019/06/20 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js