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 相关文章推荐
解密效果
Jun 23 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 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
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
javascript中的self和this用法小结
2014/02/08 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
Python实现的直接插入排序算法示例
2018/04/29 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
python 实现逻辑回归
2020/12/30 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
旧时光糖果:Old Time Candy
2018/02/05 全球购物
Shein英国:女性时尚网上商店
2019/04/10 全球购物
我的网上商城创业计划书
2013/12/26 职场文书
小学生安全保证书
2014/02/01 职场文书
就业自我评价
2014/02/04 职场文书
产品发布会策划方案
2014/05/12 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS