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

所属分类: 网络编程 / JavaScript 阅读数: 1285
收藏 0 赞 0 分享

本文实例讲述了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://www.jb51.net/article/129039.htm

PS:关于bootstrap布局,这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用:

在线bootstrap可视化布局编辑工具:
http://tools.jb51.net/aideddesign/layoutit

希望本文所述对大家基于bootstrap的程序设计有所帮助。

更多精彩内容其他人还在看

纯javascript判断查询日期是否为有效日期

很多网站都涉及到输入日期选项,如果客户日期输入错误,可能导入查询不到甚至查询到错误的信息,为了更好的满足用户需求,需要对日期进行校验,下面给大家介绍使用纯javascript如何判断查询日期是否为有效日期,需要的朋友可以参考下
收藏 0 赞 0 分享

jquery实现的蓝色二级导航条效果代码

这篇文章主要介绍了jquery实现的蓝色二级导航条效果代码,涉及jquery鼠标事件及页面样式的动态切换效果实现技巧,非常简单实用,需要的朋友可以参考下
收藏 0 赞 0 分享

ajax如何实现页面局部跳转与结果返回

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,本篇文章给大家介绍ajax如何实现页面局部跳转与结果返
收藏 0 赞 0 分享

jQuery实现的类似淘宝网站搜索框样式代码分享

这篇文章主要介绍了类似淘宝网站搜索框样式实现代码,推荐给大家,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

js实现的黑背景灰色二级导航菜单效果代码

这篇文章主要介绍了js实现的黑背景灰色二级导航菜单效果代码,涉及javascript操作页面元素动态切换的实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

jQuery仿360导航页图标拖动排序效果代码分享

这篇文章主要为大家详细介绍了360导航页图标拖动排序效果代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript中SetInterval与setTimeout的定时器用法

Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等,本文文章通过代码示例给大家介绍javascript中SetInterval与setT
收藏 0 赞 0 分享

jquery带下拉菜单和焦点图代码分享

这篇文章主要介绍了jquery带下拉菜单和焦点图代码,推荐给大家,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

jQuery实现的背景动态变化导航菜单效果

这篇文章主要介绍了jQuery实现的背景动态变化导航菜单效果,涉及jquery页面元素背景动态变换的实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

jquery+CSS实现的水平布局多级网页菜单效果

这篇文章主要介绍了jquery+CSS实现的水平布局多级网页菜单效果,涉及jquery页面元素属性动态变换效果实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多