bootstrap table + spring + springmvc + mybatis 实现从前端到后端的表格分页

1.使用准备

前台需要的资源文件，主要有Bootstrap3相关css、js以及bootstrap Table相关css、js：

<-- 样式 --><link rel="stylesheet" href="bootstrap.min.css"><link rel="stylesheet" href="bootstrap-table.css"><script src="jquery.min.js"></script><script src="bootstrap.min.js"></script><script src="bootstrap-table.js"></script><-- 表格汉化js --><script src="bootstrap-table-zh-CN.js"></script> 

以上这些插件可以到这里下载http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/ （官方文档地址）。

2.使用方法

对于bootstrap table 可以通过data 属性或者javascript 来启用bootstrap table 插件，显示丰富的功能。

这里推荐使用javascript来启用bootstrap table插件来使用bootstrap table，可以实现js和html的分离，代码可以重用，下面我介绍的时候也只介绍这种方法。

3.前端代码

页面代码：

<-- 以下是一些需要的css、js --><-- 样式 --><link rel="stylesheet" href="bootstrap.min.css"><link rel="stylesheet" href="bootstrap-table.css"><script src="jquery.min.js"></script><script src="bootstrap.min.js"></script><script src="bootstrap-table.js"></script><-- 表格汉化js --><script src="bootstrap-table-zh-CN.js"></script><-- 这是html主体代码,只需要这一个就可以了 --><div ><table id="tableList" class="table table-striped"></table> </div>

以上代码省略了部分html标签，只粘贴了主要部分。

js代码：

//通过bootstrap Table方法refresh重新加载数据function showData() {$('#tableList').bootstrapTable('refresh');}//官方使用方法的语法：<code>$('#table').bootstrapTable('method', parameter)</code>$('#tableList').bootstrapTable({    columns: [{        field: 'id',        title: '序号',    }, {        field: 'year',        title: '年度',    }, {        field: 'month',        title: '月份',    },{        field: 'creDate',        title: '日期',    },{        field: 'merBasicId',        title: '商户id',    },{        field: 'merName',        title: '商户名称',    },{        field: 'categoryTypeName',        title: '商户类型',    },{        field: 'city',        title: '城市',    },{        field: 'area',        title: '区域',    },{        field: 'tradeAreaName',        title: '商圈',    }],//页面需要展示的列，后端交互对象的属性    pagination: true,  //开启分页    sidePagination: 'server',//服务器端分页    pageNumber: 1,//默认加载页    pageSize: 20,//每页数据    pageList: [20, 50, 100, 500],//可选的每页数据    queryParams: function (params) {    return {    startDate: $("#txtStartDate").val(),    endDate: $("#txtEndDate").val(),    merName: $("#txtMerName").val(),            pageSize: params.limit,            offset: params.offset        }    },//请求服务器数据时的参数    url: rootURL+'/console/finance/channelDivideDetails/data' //服务器数据的加载地址});

对于parameter更多的描述，具体可以参考前面发的官方文档的链接。

4.后端代码

//根据传入的pageSize，offset参数决定查哪一页,根据其他参数决定查询哪些数据 @RequestMapping( value = "/data", method = RequestMethod.POST, produces = "application/json;charset=UTF-8" )  @ResponseBody  public Object channelDivideDetailsData( HttpServletRequest request, @RequestBody JSONObject jsonObj ) {    String html = "[]";    Map<String, Object> map = new HashMap<String, Object>();    String startDateStr = jsonObj.getString("startDate");    String endDateStr = jsonObj.getString("endDate");    String merName = jsonObj.getString("merName");    int pageSize = jsonObj.getIntValue("pageSize");    int offset = jsonObj.getIntValue("offset");    try {      map.put("startDate", startDateStr);      map.put("endDate", endDateStr);      if(merName != null && merName != "") {        map.put("merName", merName);      }      PageBounds pageBounds = JSPUtil.getPagerBoundsByParameter(pageSize, offset);      List<FChannelDivideDetails> list = channelDivideDetailsService.getChannelDivideDetails(map, pageBounds);      if(list != null && list.size() > 0) {        Map<String, Object> retMap =            (Map<String, Object>) JSPUtil.pagelistToJSONMapNew((PageList<FChannelDivideDetails>) list);        html = JSON.toJSONStringWithDateFormat(retMap, DATE_FORMATE_STR);      }    }    catch(Exception e) {      logger.error("系统异常e:{}", e);      this.buildResponse(ErrorCode.system_1000);    }    return html;  }

4.1这里要注意的是前端传过来的参数是json格式的，所以用@RequestBody注解后我们就能将前端传过来的参数取出来。

4.2代码里用到了mybatis的一个分页插件mybatis-paginator，我们只需要包装出一个PageBounds，参数传入service层，插件会自动帮我们代理实现分页，就不需要我们自己再写分页代码了， mybatis-paginator的具体使用教程搜索关键字查看相关文章即可。

包装PageBounds的代码：

/**   * 取得分页对象   *    * @param pageSize   * @param offset   * @return   */  @SuppressWarnings( "unused" )  public static PageBounds getPagerBoundsByParameter( int pageSize, int offset ) {    if(pageSize == 0) {      return null;    }    PageBounds pageBounds = new PageBounds(offset / pageSize + 1, pageSize);    return pageBounds;  }

4.3最后返回前端的json数据包括total、rows两个对象，total表示数据总数，rows表示需要显示的数据。必须按照这种格式返回才行。

包装返回数据的代码：

 @SuppressWarnings( { "rawtypes", "unchecked" } )  public static Object pagelistToJSONMapNew( PageList list ) {    Map<String, Object> map = new HashMap<String, Object>();    if(list != null) {      Paginator paginator = list.getPaginator();      map.put("total", paginator.getTotalCount());      map.put("rows", new ArrayList(list));    }    return map;  }

以上就实现了从前端到后端的表格分页查询。

目前主要使用到了查询分页，具体其他的操作可以参考查询相关代码。