Spring+SpringMVC+Mybatis+PageHelper+laypage+Ajax实现的分页

主要用到的说明有以下几点：

1.PageHelper的版本问题？

注意：由于我这里使用的是pagehelper-4.1.0，以下的使用及说明都是针对此版本。

2.在普通web项目和Maven项目中如何开始使用PageHelper？

如果是在普通web项目中，需要下载两个包：

如果是在Maven项目中，只需要添加下面的依赖即可：

<!-- pagehelper -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.1.0</version>
</dependency>

3.Spring中如何配置PageHelper插件？（以下代码比较多）

pagehelper5.0以上版本的配置有所不同这里不再讲述

只需要在配置mybatis的SqlSessionFactoryBean下的地方加上以下配置即可：

<!-- 配置分页插件 -->
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageHelper">
<property name="properties">
<value>
dialect=mysql
</value>
</property>
</bean>
</array>
</property>

项目中自定义的PageBean：

/**
* 分页Bean
*
* @author hkb <br>
*/
public class PageBean<T> implements Serializable {

/** */
private static final long serialVersionUID = -4996846225774365348L;

/** 总记录数 */
private long total;

/** 结果集 */
private List<T> list;

/** 页数 */
private int pageNum;

/** 每页记录数 */
private int pageSize;

/** 总页数 */
private int pages;

/** 当前页的数量 */
private int size;

/**
* 包装Page对象
*
* @param list
*/
public PageBean(List<T> list) {
if (list instanceof Page) {
Page<T> page = (Page<T>) list;
this.pageNum = page.getPageNum();
this.pageSize = page.getPageSize();
this.total = page.getTotal();
this.pages = page.getPages();
this.list = page;
this.size = page.size();
}
}

public long getTotal() {
return total;
}

public void setTotal(long total) {
this.total = total;
}

public List<T> getList() {
return list;
}

public void setList(List<T> list) {
this.list = list;
}

public int getPageNum() {
return pageNum;
}

public void setPageNum(int pageNum) {
this.pageNum = pageNum;
}

public int getPageSize() {
return pageSize;
}

public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}

public int getPages() {
return pages;
}

public void setPages(int pages) {
this.pages = pages;
}

public int getSize() {
return size;
}

public void setSize(int size) {
this.size = size;
}

}

这里有个小坑，不要在查询语句后面加多一个分号，否则分页查询会报错。在mapper.xml中用到的查询：

<select id="findAll" resultType="org.food.entity.User">
select *from f_user
</select>

serviceimpl中的实现代码：

public PageBean<User> loadUsers() {
PageHelper.startPage(PageUtil.getPageNum(),PageUtil.getPageSize());
List<User> list = userDao.findAll();
return new PageBean<User>(list);
}

PageUtil获取pageNum和pageSize的工具类（通过下面的PageFilter拦截）：

/**
* 传递分页参数的工具类
*
* @author hkb <br>
*/
public class PageUtil {

/** 页数 */
private static ThreadLocal<Integer> pageNum = new ThreadLocal<Integer>();

/** 每页记录数 */
private static ThreadLocal<Integer> pageSize = new ThreadLocal<Integer>();

public static int getPageNum() {
Integer pn = pageNum.get();
if (pn == null) {
return 0;
}
return pn;
}

public static void setPageNum(int pageNumValue) {
pageNum.set(pageNumValue);
}

public static void removePageNum() {
pageNum.remove();
}

public static int getPageSize() {
Integer ps = pageSize.get();
if (ps == null) {
return 0;
}
return ps;
}

public static void setPageSize(int pageSizeValue) {
pageSize.set(pageSizeValue);
}

public static void removePageSize() {
pageSize.remove();
}
}

这里使用过滤器的方式拦截前端传过来的pageNum和pageSize这2个参数：

/**
* 传递分页参数的Filter
*
* @author hkb <br>
*/
public class PageFilter implements Filter {

/*
* @see javax.servlet.Filter#destroy()
*/
public void destroy() {

}

/*
* @see javax.servlet.Filter#doFilter(javax.servlet.ServletRequest,
* javax.servlet.ServletResponse, javax.servlet.FilterChain)
*/
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
HttpServletRequest httpRequest = (HttpServletRequest) request;

PageUtil.setPageNum(getPageNum(httpRequest));
PageUtil.setPageSize(getPageSize(httpRequest));

chain.doFilter(request, response);
PageUtil.removePageNum();
PageUtil.removePageSize();
}

/**
* 获取传参过来的页数
*
* @param request
* @return
*/
private int getPageNum(HttpServletRequest request) {
int pageNum = 1;
String pageNums = request.getParameter("pageNum");
if (pageNums != null && StringUtils.isNumeric(pageNums)) {
pageNum = Integer.parseInt(pageNums);
}
return pageNum;
}

/**
* 获取传参过来的每页记录数
*
* @param request
* @return
*/
private int getPageSize(HttpServletRequest request) {
// 默认每页10条记录
int pageSize = 10;
String pageSizes = request.getParameter("pageSize");
if (pageSizes != null && StringUtils.isNumeric(pageSizes)) {
pageSize = Integer.parseInt(pageSizes);
}
return pageSize;
}

/*
* @see javax.servlet.Filter#init(javax.servlet.FilterConfig)
*/
public void init(FilterConfig config) throws ServletException {

}

}

controller中的代码：

@RequestMapping("/load.do")
@ResponseBody
public PageBean<User> execute() {
PageBean<User> result = userService.loadUsers();
return result;
}

web.xml中配置PageFilter：

<!-- 分页过滤器start -->
<filter>
<filter-name>pageFilter</filter-name>
<filter-class>org.food.filter.PageFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>pageFilter</filter-name>
<url-pattern>*.do</url-pattern>
</filter-mapping>
<!-- 分页过滤器end -->

4.laypage+Ajax如何在前端实现分页效果？

更多相关laypage的使用说明请看官方文档http://www.layui.com/doc/modules/laypage.html

这里直接贴出js的代码：

function loadUsers(curr) {
$(".right-nav li a").html("用户管理");
$.ajax({
url:"http://localhost:8080/food/user/load.do",
type:"post",
data : {
pageNum : curr || 1,
pageSize : 10
},
dataType:"json",
success:function(data) {
if (data.list != null) {
// 清除数据
$("#user_tab").text("");
var users = data.list;
var s_tr = "<tr><td>ID</td><td>用户名</td><td>密码</td><td>真实姓名</td><td>性别</td><td>住址</td><td>联系方式</td><td>E-mail</td><td>操作</td></tr>";
for (var i = 0, len = users.length; i < len; i++){
var id= users[i].f_user_id;
var username = users[i].f_user_name;
var password = users[i].f_user_password;
var realname = users[i].f_real_name;
var sex = users[i].f_user_sex;
var address = users[i].f_user_address;
var phone = users[i].f_user_phone;
var email = users[i].f_user_email;
s_tr += '<tr>' +
'<td class="user_id">'+id+'</td>' +
'<td>'+username+'</td>' +
'<td>'+password+'</td>' +
'<td>'+realname+'</td>' +
'<td>'+sex+'</td>' +
'<td>'+address+'</td>' +
'<td>'+phone+'</td>' +
'<td>'+email+'</td>' +
'<td><input type="button" value="删除" class="user_del"></td>' +
'</tr>';
}
$("#user_tab").append(s_tr);

// 使用laypage调用分页
laypage({
cont: 'page',//定一个容器显示分页
pages: data.pages,// 通过后台取到的页数
curr: curr || 1, //当前页
skin: 'yahei',
skip: true,
jump: function(obj, first){
if (!first) {
loadUsers(obj.curr);
}
}
})
}
}
});
}

以上只是简单的例子，分页效果如下：