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 相关文章推荐
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
javascript同步Import,同步调用外部js的方法
Jul 08 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 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字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
php fread读取文件注意事项
2016/09/24 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
Python及Pycharm安装方法图文教程
2019/08/05 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
pytorch 模型可视化的例子
2019/08/17 Python
详解python播放音频的三种方法
2019/09/23 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
鸿星尔克广告词
2014/03/21 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
党性心得体会
2014/09/03 职场文书
职称评定个人总结
2015/03/05 职场文书
音乐教师求职信范文
2015/03/20 职场文书
社区活动总结范文
2015/05/07 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android