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")@ResponseBodypublic 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);                        }                    }                })            }        }    });}

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