bootstrap table + spring + springmvc + mybatis 实现从前端到后端的表格分页
2016-08-19 10:56
671 查看
1.使用准备
前台需要的资源文件,主要有Bootstrap3相关css、js以及bootstrap Table相关css、js:
以上这些插件可以到这里下载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代码:
4.后端代码
4.2代码里用到了mybatis的一个分页插件mybatis-paginator,我们只需要包装出一个PageBounds,参数传入service层,插件会自动帮我们代理实现分页,就不需要我们自己再写分页代码了, mybatis-paginator的具体使用教程搜索关键字查看相关文章即可。
包装PageBounds的代码:
4.3最后返回前端的json数据包括total、rows两个对象,total表示数据总数,rows表示需要显示的数据。必须按照这种格式返回才行。
包装返回数据的代码:
以上就实现了从前端到后端的表格分页查询。
目前主要使用到了查询分页,具体其他的操作可以参考查询相关代码。
前台需要的资源文件,主要有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; }
以上就实现了从前端到后端的表格分页查询。
目前主要使用到了查询分页,具体其他的操作可以参考查询相关代码。
相关文章推荐
- 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页(二)前端修改、添加表格行点击弹出模态框
- ThinkPHP快速实现数据分页(前端/后端分离)
- 用jquery datatables实现页面分页,前端分页,后端分页
- 前端使用AngularJS的$resource,后端ASP.NET Web API,实现分页、过滤
- asp.net 前端跟后端通过接口调用实现数据交互(含分页)
- 利用vue + element实现表格分页和前端搜索的方法
- [后端人员耍前端系列]KnockoutJs篇:使用KnockoutJs+Bootstrap实现分页
- [后端人员耍前端系列]KnockoutJs篇:使用KnockoutJs+Bootstrap实现分页
- 前端实现一个简单的表格分页
- 基于LayUI实现前端分页功能
- 强大jQuery ui.ariaSorTable实现排序、分页的表格
- js表格分页实现代码
- JSP实现前端实现分页
- esayui datagrid 前端分页的实现方式
- 前端分页功能的实现以及原理(jQuery)
- JS 实现简单的Table表格分页效果(假分页)
- 应用jQuery Ajax 实现前台与Struts2中Action的交互,并返回一个ArrayList的JSON对象,在前端表格中显示
- 基于jquery实现表格无刷新分页
- JS实现table表格数据排序(可支持动态数据+分页效果)