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 相关文章推荐
IE iframe的onload方法分析小结
Jan 07 Javascript
自写简单JS判断是否已经弹出页面
Oct 20 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
javascript判断office版本示例
Apr 11 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 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/12/05 PHP
ADODB的数据库封包程序库
2006/12/31 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
phpwind放自动注册方法
2006/12/02 Javascript
js window.event对象详尽解析
2009/02/17 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
详解Python的循环结构知识点
2019/05/20 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
物理教育专业毕业生推荐信
2013/11/03 职场文书
护士求职推荐信范文
2013/11/23 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
德能勤绩工作总结
2015/08/11 职场文书
搭建Yolov5服务器
2022/04/30 Servers