本h-ui.admin分页工具类后端使用的是java mybatis pagehelper分页插件写的，前端使用laypage分页插件，因为hui-admin框架其实使用的是laypage分页插件。如果是php的话，后端只要有类似根据当前页currentPage和页大小pageSize参数返回总条数total和rows数据的方法，就可以使用本分页工具类来实现分页。
1：写后端分页代码，java后端分页代码如下，这里只展示Controller层的代码，pagehelper相信大家都会，这里不再赘述。
@Controller
public class UserController {
@Autowired
private UserService userService;
@Autowired
private UserMapper userMapper;
@RequestMapping(value="/user/list",method=RequestMethod.GET)
@ResponseBody
public Map<String, Object>findAllByPage(int currPage,int pageSize){
Map<String, Object> resultMap = new HashMap<String, Object>();
PageInfo<User> pager = userService.findUserByPage(currPage,pageSize);
//总条数
resultMap.put("total", pager.getTotal());
//获取每页数据
resultMap.put("rows", pager.getList());
return resultMap;
}
}返回的json数据格式如下图所示。
2：在需要使用h.ui-admin分页的页面加入如下html，包含了所有hui.admin框架的引入，在jquery初始化的时候使用core.getUserListByPage();方法进行分页。
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>h.ui-admin分页插件案例</title>
<!--引入hui.admin相关css -->
<link rel="stylesheet" type="text/css" href="lib/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="lib/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="lib/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="lib/static/h-ui.admin/css/style.css" />
<script type="text/javascript" src="./lib/jquery/1.9.1/jquery.min.js"></script>
<!--引入laypage相关的js和css -->
<link type="text/css" href="./lib/laypage/1.2/skin/laypage.css">
<script type="text/javascript" src="./lib/laypage/1.2/laypage.js"></script>
<!--引入自定义的hui.admin分页实现core.js -->
<script type="text/javascript" src="./js/core.js"></script>
<style type="text/css">
.pager {
float: left;
padding-top: 10px;
}
</style>
</head>
<body>
<table class="table table-border table-bordered table-bg" style="width: 800px">
<thead>
<tr class="text-c">
<th>ID</th>
<th>用户名</th>
<th>密码</th>
<th>电话</th>
<th>地址</th>
<th>分数</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody" class="text-c">
</tbody>
</table>
<!-- 分页标签 -->
<div id="page1" class="pager"></div>
</body>
<script type="text/javascript">
$(function(){
//引入core.js中的方法进行分页
core.getUserListByPage();
});
</script>
</html>3：实现core.js里面的分页逻辑，我已经写好了，直接引入到需要分页的html页面就可以了。
var core = (function ($) {
var getRootPath = function() {
var curWwwPath=window.document.location.href;
var pathName=window.document.location.pathname;
var pos=curWwwPath.indexOf(pathName);
var localhostPaht=curWwwPath.substring(0,pos);
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
return(localhostPaht+projectName);
};
/**
* 分页组件
*/
var getPage = function (url, config, content) {
$.getJSON(url, config, function (res) {
laypage({
cont: 'page1',
pages: Math.ceil(res.total / config.pageSize),
curr: config.page || 1,
group: 5,
skip: true,
jump: function (obj, first) {
if (!first) {
config.page = obj.curr;
getPage(url,config,content);
}
}
});
$('#tbody').html(content(res,config.page));
});
};
//返回content数据到页面，currPage便于删除数据时好定位到该类，此处未用
function parseUserList(res,currPage){
var content = "";
$.each(res.rows, function (i, o) {
content += "<tr>";
content += "<td>"+o.id+"</td>";
content += "<td>"+o.username+"</td>";
content += "<td>"+o.password+"</td>";
content += "<td>"+o.phone+"</td>";
content += "<td>"+o.address+"</td>";
content += "<td>"+o.score+"</td>";
content += "<td><a>删除</a></td>";
content += "</tr>";
});
return content;
}
//从后台获取json数据
var getUserListByPage = function(curr){
core.getPage(core.getRootPath() + '/user/list',{
page: curr || 1,
pageSize: 5
},parseUserList);
};
return {
getRootPath: getRootPath,
getPage: getPage,
getUserListByPage:getUserListByPage
};
})(jQuery);4：h.ui-admin分页之后效果如图所示。
