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调用webService远程访问出错的解决方法
May 21 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
javascript相关事件的几个概念
May 21 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
JS使用new操作符创建对象的方法分析
May 30 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 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/03 冲泡冲煮
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
vue webpack实用技巧总结
2018/04/24 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
实践Vim配置python开发环境
2018/07/02 Python
python字符串格式化方式解析
2019/10/19 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
《巨人的花园》教学反思
2014/02/12 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
工作时间调整通知
2015/04/24 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技
使用Apache Camel表达REST服务的方法
2022/06/10 Servers