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 Discuz代码中的msn聊天小功能
May 25 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
js实现文字滚动效果
Mar 03 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
使用canvas及js简单生成验证码方法
Apr 02 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
微信小程序实现随机验证码功能
Dec 20 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
JS实现时间校验的代码
May 25 Javascript
浅谈react路由传参的几种方式
Mar 23 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 PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
javascript 函数速查表
2010/02/07 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
vue内置指令详解
2018/04/03 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
银行贷款承诺书
2014/03/29 职场文书
2014年变电站工作总结
2014/12/19 职场文书
写给老师的感谢信
2015/01/20 职场文书
教师节座谈会主持词
2015/07/03 职场文书
社区宣传标语口号
2015/12/26 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android