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

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

• PageHelper的版本问题
• 在普通web项目和Maven中如何开始使用PageHelper
• Spring中如何配置PageHelper插件
• laypage+Ajax如何在前端实现分页效果

---

1.PageHelper的版本问题？

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

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

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

pagehelper-4.1.0.jar、jsqlparser-0.9.4.jar

如果是在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);
                        }
                    }
                })
            }
        }
    });
}

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