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插件
Nov 19 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
JS.getTextContent(element,preformatted)使用介绍
Sep 21 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
微信小程序实现留言功能
Oct 31 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
模仿OSO的论坛(五)
2006/10/09 PHP
php mysql数据库操作类
2008/06/04 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
jQuery使用手册之一
2007/03/24 Javascript
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
Python基类函数的重载与调用实例分析
2015/01/12 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
python爬虫如何解决图片验证码
2021/02/14 Python
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
仓库规划计划书
2014/04/28 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB
Python+pyaudio实现音频控制示例详解
2022/07/23 Python