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 Math.random()随机数函数
Nov 04 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
基于Vue过渡状态实例讲解
Sep 14 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
vue项目中使用多选框的实例代码
Jul 22 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个人网站架设连环讲(二)
2006/10/09 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
pygame播放音乐的方法
2015/05/19 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
工厂会计员职责
2014/02/06 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
入党积极分子评语
2014/05/04 职场文书
医学专业大学生求职信
2014/07/12 职场文书
营业用房租赁协议书
2014/11/26 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
合同范本之电脑出租
2019/08/13 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
PHP设计模式(观察者模式)
2021/07/07 PHP
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL