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+plupload直接批量上传图片到又拍云
Dec 01 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
React组件生命周期详解
Jul 03 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
Nov 25 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
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 数组实例说明
2008/08/18 PHP
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
python线程锁(thread)学习示例
2013/12/04 Python
Python中的__SLOTS__属性使用示例
2015/02/18 Python
深入理解Python对Json的解析
2017/02/14 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
python如何生成网页验证码
2018/07/28 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
python对csv文件追加写入列的方法
2019/08/01 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
《植物妈妈有办法》教学反思
2014/02/25 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
服务承诺书格式
2014/05/21 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技