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插件 大家可以收藏一下
Feb 07 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
微信小程序点击保存图片到本机功能
Dec 13 Javascript
JavaScript canvas绘制折线图
Feb 18 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实现打包zip并下载功能
2018/06/12 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
python实现统计代码行数的方法
2015/05/22 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
教职工代表大会主持词
2014/04/01 职场文书
绿色小区申报材料
2014/08/22 职场文书
开展创先争优活动总结
2014/08/28 职场文书
社区党员公开承诺书
2014/08/30 职场文书
作文评语集锦
2014/12/25 职场文书
大学生逃课检讨书
2015/05/04 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书