bootstrap table + spring + springmvc + mybatis 实现从前端到后端的表格分页
1.使用准备
前台需要的资源文件，主要有Bootstrap3相关css、js以及bootstrap Table相关css、js：
<-- 样式 -->
<-- 表格汉化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 -->
<-- 样式 -->
<-- 表格汉化js -->
<-- 这是html主体代码,只需要这一个就可以了 -->
js代码：
//通过bootstrap Table方法refresh重新加载数据
function showData() {
$('#tableList').bootstrapTable('refresh');
}
//官方使用方法的语法：$('#table').bootstrapTable('method', parameter)
$('#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' //服务器数据的加载地址
});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 map = new HashMap();
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 list = channelDivideDetailsService.getChannelDivideDetails(map, pageBounds);
if(list != null && list.size() > 0) {
Map retMap =
(Map) JSPUtil.pagelistToJSONMapNew((PageList) list);
html = JSON.toJSONStringWithDateFormat(retMap, DATE_FORMATE_STR);
}
}
catch(Exception e) {
logger.error("系统异常e:{}", e);
this.buildResponse(ErrorCode.system_1000);
}
return html;
}
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 map = new HashMap();
if(list != null) {
Paginator paginator = list.getPaginator();
map.put("total", paginator.getTotalCount());
map.put("rows", new ArrayList(list));
}
return map;
} 以上就实现了从前端到后端的表格分页查询。
目前主要使用到了查询分页，具体其他的操作可以参考查询相关代码。