Bootstrap table 服务器端分页功能实现方法示例


Posted in Javascript onJune 01, 2020

本文实例讲述了Bootstrap table 服务器端分页功能实现方法。分享给大家供大家参考,具体如下:

bootstrap版本 为 3.X

bootstrap-table.min.css
bootstrap-table-zh-CN.min.js
bootstrap-table.min.js

前端bootstrap+jQuery,服务端使用spring MVC实现restful风格服务

前端代码块

<table id="test-table" class="col-xs-12" data-toolbar="#toolbar">
function initTable(){
  $('#test-table').bootstrapTable({
    method: 'get',
    toolbar: '#toolbar',  //工具按钮用哪个容器
    striped: true,   //是否显示行间隔色
    cache: false,   //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
    pagination: true,   //是否显示分页(*)
    sortable: false,   //是否启用排序
    sortOrder: "asc",   //排序方式
    pageNumber:1,   //初始化加载第一页,默认第一页
    pageSize: 10,   //每页的记录行数(*)
    pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
    url: "/testProject/page4list.json",//这个接口需要处理bootstrap table传递的固定参数
    queryParamsType:'', //默认值为 'limit' ,在默认情况下 传给服务端的参数为:offset,limit,sort
              // 设置为 '' 在这种情况下传给服务器的参数为:pageSize,pageNumber

    //queryParams: queryParams,//前端调用服务时,会默认传递上边提到的参数,如果需要添加自定义参数,可以自定义一个函数返回请求参数
    sidePagination: "server",  //分页方式:client客户端分页,server服务端分页(*)
    //search: true,   //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
    strictSearch: true,
    //showColumns: true,   //是否显示所有的列
    //showRefresh: true,   //是否显示刷新按钮
    minimumCountColumns: 2,  //最少允许的列数
    clickToSelect: true,  //是否启用点击选中行
    searchOnEnterKey: true,
    columns: [{
      field: 'id',
      title: 'id',
      align: 'center'
    }, {
      field: 'testkey',
      title: '测试标识',
      align: 'center'
    }, {
      field: 'testname',
      title: '测试名字',
      align: 'center'
    },{
      field: 'id',
      title: '操作',
      align: 'center',
      formatter:function(value,row,index){
        //通过formatter可以自定义列显示的内容
        //value:当前field的值,即id
        //row:当前行的数据
        var a = '<a href="" >测试</a>';
      } 
    }],
    pagination:true
  });
}

在前端通过请求获取table数据时,bootstrap table会默认拼一个 searchText的参数,来支持查询功能。

服务端代码

@RequestMapping(value = "/page4list.json")
  public void page4list(Integer pageSize, Integer pageNumber, String searchText, HttpServletRequest request,
      HttpServletResponse response) {

    //搜索框功能
    //当查询条件中包含中文时,get请求默认会使用ISO-8859-1编码请求参数,在服务端需要对其解码
    if (null != searchText) {
      try {
        searchText = new String(searchText.getBytes("ISO-8859-1"), "UTF-8");
      } catch (Exception e) {
        e.printStackTrace();
      }
    }
    //在service通过条件查询获取指定页的数据的list
    List<MwmsgType> list = mwMsgQueueService.page4List(pageSize, pageNumber, searchText);
    //根据查询条件,获取符合查询条件的数据总量
    int total = mwMsgQueueService.queryCountBySearchText(searchText);
    //自己封装的数据返回类型,bootstrap-table要求服务器返回的json数据必须包含:totlal,rows两个节点
    PageResultForBootstrap page = new PageResultForBootstrap();
    page.setTotal(total);
    page.setRows(list);
    //page就是最终返回给客户端的数据结构,可以直接返回给前端

    //下边这段,只是我自己的代码有自定义的spring HandlerInterceptor处理返回值,可以忽略。
    request.setAttribute(Constants.pageResultData, page);

  }

完成上述代码,即可实现服务器端自动分页,bootstrap-table根据服务器端返回的total,以及table设定的pageSize,自动生成分页的页面元素,每次点击下一页或者指定页码,bootstrap-table会自动给参数pageNumber赋值,服务器返回指定页的数据。

如果发送的是post请求,因为bootstap table使用的是ajax方式获取数据,这时会将请求的content type默认设置为 text/plain,这样在服务端直接通过 @RequestParam参数映射是获取不到的。

这时就需要在bootstrap-table的参数列表中显式设置

contentType: "application/x-www-form-urlencoded"

设置成form表单的形式,tomcat内部就会自动将requset payload中的数据部分解析放到request.getParameter()中,之后就可以直接通过@RequestParam映射参数获取
post的处理参考了下面这个哥们的博文,在此感谢!

参考链接:
https://3water.com/article/129039.htm

Javascript 相关文章推荐
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 #Javascript
JS如何寻找数组中心索引过程解析
Jun 01 #Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 #Javascript
bootstrap-table后端分页功能完整实例
Jun 01 #Javascript
jQuery实现倒计时功能完整示例
Jun 01 #jQuery
微信小程序订阅消息(java后端实现)开发
Jun 01 #Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 #Javascript
You might like
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
新闻内页-JS分页
2006/06/07 Javascript
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
Python程序退出方式小结
2017/12/09 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
工作一年自我鉴定
2019/06/20 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python