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 URL参数读取改进版
Jan 16 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
canvas实现图像放大镜
Feb 06 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 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
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
php define的第二个参数使用方法
2013/11/04 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
JS中数据结构之栈
2019/01/01 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
Vue中props的详解
2019/05/16 Javascript
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
python利用hook技术破解https的实例代码
2013/03/25 Python
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
python selenium 弹出框处理的实现
2019/02/26 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
python使用建议与技巧分享(二)
2020/08/17 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
文明学生标兵事迹
2014/01/21 职场文书
业务员简历自我评价
2014/03/06 职场文书
货车司机岗位职责
2014/03/18 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
技术股份合作协议书
2014/10/05 职场文书
自荐信范文
2019/05/20 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL