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 相关文章推荐
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
JQuery 学习笔记 选择器之六
Jul 23 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
js实现随机点名器精简版
Jun 29 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的cms
2010/12/19 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
5款非常棒的Python工具
2018/01/05 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
详解python itertools功能
2020/02/07 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
商务会议邀请函
2014/01/09 职场文书
节能宣传周活动总结
2014/05/08 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
小学推普周活动总结
2015/05/07 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python