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综合应用实例简单的表格统计
Sep 03 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
3种js实现string的substring方法
Nov 09 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 Javascript
基于javascript的无缝滚动动画1
Aug 07 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
Access数据库导入Mysql的方法之一
2006/10/09 PHP
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
Express.JS使用详解
2014/07/17 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
盘点提高 Python 代码效率的方法
2014/07/03 Python
Python中的__slots__示例详解
2017/07/06 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
python中有关时间日期格式转换问题
2019/12/25 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
闪闪红星观后感
2015/06/08 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
python中pandas对多列进行分组统计的实现
2021/06/18 Python
微信小程序实现轮播图指示器
2022/06/25 Javascript