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

2023-08-20 13:35:04

1.使用准备

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

  1. <-- 样式 -->
  2. <link rel="stylesheet" href="bootstrap.min.css">
  3. <link rel="stylesheet" href="bootstrap-table.css">
  4. <script src="jquery.min.js"></script>
  5. <script src="bootstrap.min.js"></script>
  6. <script src="bootstrap-table.js"></script>
  7. <-- 表格汉化js -->
  8. <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.前端代码

页面代码：

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


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


js代码：




    

  1. //通过bootstrap Table方法refresh重新加载数据
    2. 

  2. function showData() {
    3. 

  3. $('#tableList').bootstrapTable('refresh');
    4. 

  4. }
    5. 

  5. //官方使用方法的语法：<code>$('#table').bootstrapTable('method', parameter)</code>
    6. 

  6. $('#tableList').bootstrapTable({
    7. 

  7. columns: [{
    8. 

  8. field: 'id',
    9. 

  9. title: '序号',
    10. 

  10. }, {
    11. 

  11. field: 'year',
    12. 

  12. title: '年度',
    13. 

  13. }, {
    14. 

  14. field: 'month',
    15. 

  15. title: '月份',
    16. 

  16. },{
    17. 

  17. field: 'creDate',
    18. 

  18. title: '日期',
    19. 

  19. },{
    20. 

  20. field: 'merBasicId',
    21. 

  21. title: '商户id',
    22. 

  22. },{
    23. 

  23. field: 'merName',
    24. 

  24. title: '商户名称',
    25. 

  25. },{
    26. 

  26. field: 'categoryTypeName',
    27. 

  27. title: '商户类型',
    28. 

  28. },{
    29. 

  29. field: 'city',
    30. 

  30. title: '城市',
    31. 

  31. },{
    32. 

  32. field: 'area',
    33. 

  33. title: '区域',
    34. 

  34. },{
    35. 

  35. field: 'tradeAreaName',
    36. 

  36. title: '商圈',
    37. 

  37. }],//页面需要展示的列，后端交互对象的属性
    38. 

  38. pagination: true,  //开启分页
    39. 

  39. sidePagination: 'server',//服务器端分页
    40. 

  40. pageNumber: 1,//默认加载页
    41. 

  41. pageSize: 20,//每页数据
    42. 

  42. pageList: [20, 50, 100, 500],//可选的每页数据
    43. 

  43. queryParams: function (params) {
    44. 

  44. return {
    45. 

  45. startDate: $("#txtStartDate").val(),
    46. 

  46. endDate: $("#txtEndDate").val(),
    47. 

  47. merName: $("#txtMerName").val(),
    48. 

  48. pageSize: params.limit,
    49. 

  49. offset: params.offset
    50. 

  50. }
    51. 

  51. },//请求服务器数据时的参数
    52. 

  52. url: rootURL+'/console/finance/channelDivideDetails/data' //服务器数据的加载地址
    53. 

  53. });
    54. 





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


4.后端代码




    

  1. //根据传入的pageSize，offset参数决定查哪一页,根据其他参数决定查询哪些数据
    2. 

  2. @RequestMapping( value = "/data", method = RequestMethod.POST, produces = "application/json;charset=UTF-8" )
    3. 

  3. @ResponseBody
    4. 

  4. public Object channelDivideDetailsData( HttpServletRequest request, @RequestBody JSONObject jsonObj ) {
    5. 

  5. String html = "[]";
    6. 

  6. Map<String, Object> map = new HashMap<String, Object>();
    7. 

  7. String startDateStr = jsonObj.getString("startDate");
    8. 

  8. String endDateStr = jsonObj.getString("endDate");
    9. 

  9. String merName = jsonObj.getString("merName");
    10. 

  10. int pageSize = jsonObj.getIntValue("pageSize");
    11. 

  11. int offset = jsonObj.getIntValue("offset");
    12. 

  12. try {
    13. 

  13. map.put("startDate", startDateStr);
    14. 

  14. map.put("endDate", endDateStr);
    15. 

  15. if(merName != null && merName != "") {
    16. 

  16. map.put("merName", merName);
    17. 

  17. }
    18. 

  18. PageBounds pageBounds = JSPUtil.getPagerBoundsByParameter(pageSize, offset);
    19. 

  19. List<FChannelDivideDetails> list = channelDivideDetailsService.getChannelDivideDetails(map, pageBounds);
    20. 

  20. if(list != null && list.size() > 0) {
    21. 

  21. Map<String, Object> retMap =
    22. 

  22. (Map<String, Object>) JSPUtil.pagelistToJSONMapNew((PageList<FChannelDivideDetails>) list);
    23. 

  23. html = JSON.toJSONStringWithDateFormat(retMap, DATE_FORMATE_STR);
    24. 

  24. }
    25. 

  25. }
    26. 

  26. catch(Exception e) {
    27. 

  27. logger.error("系统异常e:{}", e);
    28. 

  28. this.buildResponse(ErrorCode.system_1000);
    29. 

  29. }
    30. 

  30. return html;
    31. 

  31. }
    32. 





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


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


包装PageBounds的代码：




    

  1. /**
    2. 

  2. * 取得分页对象
    3. 

  3. *
    4. 

  4. * @param pageSize
    5. 

  5. * @param offset
    6. 

  6. * @return
    7. 

  7. */
    8. 

  8. @SuppressWarnings( "unused" )
    9. 

  9. public static PageBounds getPagerBoundsByParameter( int pageSize, int offset ) {
    10. 

  10. if(pageSize == 0) {
    11. 

  11. return null;
    12. 

  12. }
    13. 

  13. PageBounds pageBounds = new PageBounds(offset / pageSize + 1, pageSize);
    14. 

  14. return pageBounds;
    15. 

  15. }
    16. 





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


包装返回数据的代码：




    

  1. @SuppressWarnings( { "rawtypes", "unchecked" } )
    2. 

  2. public static Object pagelistToJSONMapNew( PageList list ) {
    3. 

  3. Map<String, Object> map = new HashMap<String, Object>();
    4. 

  4. if(list != null) {
    5. 

  5. Paginator paginator = list.getPaginator();
    6. 

  6. map.put("total", paginator.getTotalCount());
    7. 

  7. map.put("rows", new ArrayList(list));
    8. 

  8. }
    9. 

  9. return map;
    10. 

  10. }
    11. 





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


目前主要使用到了查询分页，具体其他的操作可以参考查询相关代码。
上一篇：ligerUI---ligerGrid分页排序的使用(从后台获取数据显示)

下一篇：600字读懂 Git