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 chrome浏览器判断代码
Mar 28 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
json传值以及ajax接收详解
May 24 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 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 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
js 操作css实现代码
2009/06/11 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
Python模块包中__init__.py文件功能分析
2016/06/14 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
python super用法及原理详解
2020/01/20 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
PHP如何自定义函数
2016/09/16 面试题
上海天奕面试题笔试题
2015/04/19 面试题
高中英语演讲稿范文
2014/04/24 职场文书
教师考核材料
2014/05/21 职场文书
开工仪式策划方案
2014/05/23 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
村委会贫困证明范本
2014/09/17 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
会计工作总结范文2014
2014/12/23 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
导游词之无锡唐城
2019/12/12 职场文书
mysql优化
2021/04/06 MySQL