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

本文实例讲述了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的程序设计有所帮助。

(0)

相关推荐

  • bootstrap-table后端分页功能完整实例

    本文实例讲述了bootstrap-table后端分页功能.分享给大家供大家参考,具体如下: 使用bootstrap-table实现后台分页 插件资源点击此处本站下载. 引用以下css <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css" rel="external nofollow" > <link rel="styleshee

  • bootstrap table表格插件之服务器端分页实例代码

    Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头.单复选.排序.分页.搜索以及自定义表头等功能. 因公司的项目需要实现用户管理的表格实现,所以选用了bootstrap-table用于动态获取后台的用户数据显示到前台. 示例截图: 客户端代码: //引入的css文件 <link href="../public/static/css/bootstrap.min.css" rel="external nofo

  • BootStrap Table前台和后台分页对JSON格式的要求

    Bootstrap是一款前端非常流行的框架,其中的表格更为大家经常使用.大家都知道表格的分页分为前台和后台分页,也就是表格配置中sidePagination属性,当sidePagination: "server"时表示后台分页,sidePagination: "client"为前台分页.前台分页主要适用于数据量不多的情况,当数据量较大时,一般使用后台分页,我们平时在项目中大多数使用后台分页. 近期做项目的时候,同事问了直接改变sidePagination: &quo

  • BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题

    主要是页码超出范围带来的问题,仅在此记录一下,这里我通过修改bootstrap-table.js的initServer方法中的查询success回调函数解决,将该回调函数改为: function (res) { /**TODO:2016-12-20新加的代码,处理页码错误问题开始*/ if(res.total!=0&&res.rows.length==0){//总记录数大于0,但当前页记录数为0,则此时页码超过了最大页码误 that.options.pageNumber = Math.ce

  • 第一次动手实现bootstrap table分页效果

    先上图吧,这就是bootstrap table分页效果图 上代码(这一部分是工具栏的,还包括slider滑动条) <div class="box-body"> <div class="row"> <div class="form-group col-xs-3" style="width: 432px;"> <label for="SendUser" class=&q

  • bootstrap table分页模板和获取表中的ID方法

    1.dao层 MyBatis映射 mapper.xml中 <select id="getTcdt" parameterType="com.ls.entity.Mydata" resultMap="BaseResultMap"> select * from TB_COMMUNICATION_DEVICE_TBL ORDER BY ${ordername} ${order} </select> mapper.java中 pub

  • bootstrap table 服务器端分页例子分享

    1,前台引入所需的js 可以从官网上下载 复制代码 代码如下: function getTab(){ var url = contextPath+'/fundRetreatVoucher/fundBatchRetreatVoucherQuery.htm'; $('#tab').bootstrapTable({ method: 'get', //这里要设置为get,不知道为什么 设置post获取不了 url: url, cache: false, height: 400, striped: tru

  • BootStrap中Table分页插件使用详解

    分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. bootstrap-table介绍 bootstrap-table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化. 下载地址 https://github.com/wenzhixin/bootstrap-table/archive/1.11.0.zip 使用方式 引入css和js <!--css样式--> <link href=&qu

  • bootstrap table插件的分页与checkbox使用详解

    今天需要实现这样一个功能,有checkbox列表可供选择,要选择不分页之间的行并保存 最终实现的功能如图:(图片来自网上) 具体实现 首先,来看具体的代码,这里只截取实现功能所需代码 var selectionIds =[],selectionNames=[]; var curd = { init:function(){ this._getCheckParam(); }, /** * 初始化 * @private */ /** * 表格操作 */ //表格分页之前处理多选框数据 _respons

  • Bootstrap table分页问题汇总

    首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务器端取不到form值,querystring没有问题, 但是request.form取不到值 解决:这是ajax的问题,原代码使用原生的ajax.   1可以用读流文件解决.2 如果想用request.form 方式,设置  contentType: "application/x-www-form-

  • 使用bootstraptable插件实现表格记录的查询、分页、排序操作

    在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件,在很多项目中广泛的应用.Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询.分页.排序.复选框.设置显示列.Card view视图.主从表显示.合并列.国际化处理等处理功能,而且该插件同时也提供了一些不错的扩展功能,如移动行.移动列位置等一些特殊的功能,插件可

  • bootstrap-table实现服务器分页的示例 (spring 后台)

    最近前端都是用的bootstrap table这个插件,客户端分页的话数据量一多交互不好,所以大数据量的分页都用服务器端,下面开始撸代码 前端 首先看下bootstrap table 默认传的分页参数是什么 offset 从哪个下标开始 limit 每页限制的数量 可能跟我们的默认分页参数不大一样吧,所以决定改造一下,传到后台的参数为 page 第几页 从0开始 size 每页显示的数量 $('#' + tableId).bootstrapTable({ queryParams: functio

随机推荐