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 相关文章推荐
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
通过循环优化 JavaScript 程序
Jun 24 Javascript
js单线程的本质 Event Loop解析
Oct 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中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
js密码强度检测
2016/01/07 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
Vue基础配置讲解
2019/11/29 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
Python模块包中__init__.py文件功能分析
2016/06/14 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
"火柴棍式"程序员面试题
2014/03/16 面试题
外贸英语专业求职信范文
2013/12/25 职场文书
市场部管理制度
2014/02/02 职场文书
年终晚会主持词
2014/03/25 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
高中生毕业评语
2014/12/30 职场文书
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS