SSM实现分页效果

分页是JAVA WEB项目常用的功能，今天在Spring MVC中实现了简单的分页操作和搜索分页，在此记录一下。使用的框架为SSM（MyBatis+SpringMVC+Spring）。

先上效果图

一、Java 工具类

Page.java

package com.liuyanzhao.blog.util.others;

/**
 * 分页
 * Created by 言曌 on 2017/8/26.
 */
import java.io.Serializable;

public class Page implements Serializable {

    private static final long serialVersionUID = -3198048449643774660L;

    private int pageNow = 1; // 当前页数

    private int pageSize = 10; // 每页显示记录的条数

    private int totalCount; // 总的记录条数

    private int totalPageCount; // 总的页数

    @SuppressWarnings("unused")
    private int startPos; // 开始位置，从0开始

    @SuppressWarnings("unused")
    private boolean hasFirst;// 是否有首页

    @SuppressWarnings("unused")
    private boolean hasPre;// 是否有前一页

    @SuppressWarnings("unused")
    private boolean hasNext;// 是否有下一页

    @SuppressWarnings("unused")
    private boolean hasLast;// 是否有最后一页

    /**
     * 通过构造函数 传入  总记录数  和  当前页
     * @param totalCount
     * @param pageNow
     */
    public Page(int totalCount, int pageNow) {
        this.totalCount = totalCount;
        this.pageNow = pageNow;
    }

    /**
     * 取得总页数，总页数=总记录数/总页数
     * @return
     */
    public int getTotalPageCount() {
        totalPageCount = getTotalCount() / getPageSize();
        return (totalCount % pageSize == 0) ? totalPageCount
            : totalPageCount + 1;
    }

    public void setTotalPageCount(int totalPageCount) {
        this.totalPageCount = totalPageCount;
    }

    public int getPageNow() {
        return pageNow;
    }

    public void setPageNow(int pageNow) {
        this.pageNow = pageNow;
    }

    public int getPageSize() {
        return pageSize;
    }

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

    public int getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }
    /**
     * 取得选择记录的初始位置
     * @return
     */
    public int getStartPos() {
        return (pageNow - 1) * pageSize;
    }

    public void setStartPos(int startPos) {
        this.startPos = startPos;
    }

    /**
     * 是否是第一页
     * @return
     */
    public boolean isHasFirst() {
        return (pageNow == 1) ? false : true;
    }

    public void setHasFirst(boolean hasFirst) {
        this.hasFirst = hasFirst;
    }
    /**
     * 是否有首页
     * @return
     */
    public boolean isHasPre() {
        // 如果有首页就有前一页，因为有首页就不是第一页
        return isHasFirst() ? true : false;
    }

    public void setHasPre(boolean hasPre) {
        this.hasPre = hasPre;
    }
    /**
     * 是否有下一页
     * @return
     */
    public boolean isHasNext() {
        // 如果有尾页就有下一页，因为有尾页表明不是最后一页
        return isHasLast() ? true : false;
    }

    public void setHasNext(boolean hasNext) {
        this.hasNext = hasNext;
    }
    /**
     * 是否有尾页
     * @return
     */
    public boolean isHasLast() {
        // 如果不是最后一页就有尾页
        return (pageNow == getTotalCount()) ? false : true;
    }

    public void setHasLast(boolean hasLast) {
        this.hasLast = hasLast;
    }

}

 

二、编辑数据访问层 Mapper.xml 和 Mapper 类

博主使用是 Mapper 代理方式操作数据库，Mapper 代理需要类和xml文件在一起

当然大家也可以用 DAO 的方式

• ArticleMapperCustom.xml

-- 查询文章记录总数 -->
<select id="getArticleCount" resultType="int">
    select count(*) from article
select>

--通过分页查询文章-->
<select id="selectArticleByPage" resultType="com.liuyanzhao.blog.po.custom.ArticleCustom">
    select * from article limit #{startPos},#{pageSize}
select>

 

• ArticleMapperCustom.java

//分页操作
public List selectArticleByPage(@Param(value="startPos") Integer startPos,@Param(value="pageSize") Integer pageSize) throws Exception;

 

三、编辑业务层  Service类 和 Service的实现类

• ArticleService.java  （接口）

//分页显示
public void showArticleByPage(HttpServletRequest request, Model model) throws Exception;

• ArticleServiceImpl.java  （实现类）

@Override
    public void showArticleByPage(HttpServletRequest request, Model model) throws Exception {
        String pageNow = request.getParameter("pageNow");

        Page page = null;

        List articleList = new ArrayList();

        int totalCount = articleMapperCustom.getArticleCount();

        if (pageNow != null) {
            page = new Page(totalCount, Integer.parseInt(pageNow));
            articleList = this.articleMapperCustom.selectArticleByPage(page.getStartPos(), page.getPageSize());
        } else {
            page = new Page(totalCount, 1);
            articleList = this.articleMapperCustom.selectArticleByPage(page.getStartPos(), page.getPageSize());
        }

        model.addAttribute("articleList", articleList);
        model.addAttribute("page", page);
    }

 

四、编辑控制层  Controller 类

IndexController.java

@Autowired
private ArticleService articleService;

//首页文章分页显示
@RequestMapping("/")
public String IndexView(HttpServletRequest request, Model model) throws Exception {

    //此处的articleService是注入的articleService接口的对象
    articleService.showArticleByPage(request, model);

    return "/WEB-INF/Home/Index/index.jsp";
}

注意：

这里的 articleService 需要注入，在 spring 配置文件中添加

bean id="userService" class="com.liuyanzhao.blog.service.impl.UserServiceImpl"/>

 

五、编辑视图层  JSP 文件

这里只将分页部分的代码贴出

           <div align="center">
               <span>共 ${page.totalPageCount} 页span> <span >第
               ${page.pageNow} 页span> <a href="?pageNow=1">首页a>
               <c:choose>
                   <c:when test="${page.pageNow - 1 > 0}">
                       <a href="?pageNow=${page.pageNow - 1}">上一页a>
                   c:when>
                   <c:when test="${page.pageNow - 1 <= 0}">
                       <a href="?pageNow=1">上一页a>
                   c:when>
               c:choose>
               <c:choose>
                   <c:when test="${page.totalPageCount==0}">
                       <a href="?pageNow=${page.pageNow}">下一页a>
                   c:when>
                   <c:when test="${page.pageNow + 1 < page.totalPageCount}">
                       <a href="?pageNow=${page.pageNow + 1}">下一页a>
                   c:when>
                   <c:when test="${page.pageNow + 1 >= page.totalPageCount}">
                       <a href="?pageNow=${page.totalPageCount}">下一页a>
                   c:when>
               c:choose>
               <c:choose>
                   <c:when test="${page.totalPageCount==0}">
                       <a href="?pageNow=${page.pageNow}">尾页a>
                   c:when>
                   <c:otherwise>
                       <a href="?pageNow=${page.totalPageCount}">尾页a>
                   c:otherwise>
               c:choose>
           div>

注意：

我的测试地址是：http://localhost:8090/ForestBlog

其中 localhost:8090/ForestBlog 可以当做域名，因为我的 控制器里的

@RequestMapping("/") 里是 / ，

如果你是 @RequestMapping("/xxx")  之类的，需要在 上面的四个链接的？之前加 xxx

 

这个效果图如下

 

 

六、美化分页

为了达到这样的效果，我们这里修改上面的 jsp 代码

我用的是 Bootstrap 和 Font Awesome 的图标

<div class="divBody">
           <div class="divContent">

               <c:choose>
                   <c:when test="${page.totalPageCount <= 10 }">
                       <c:set var="begin" value="1"/>
                       <c:set var="end" value="${page.totalPageCount }"/>
                   c:when>
                   <c:otherwise>
                       <c:set var="begin" value="${page.pageNow-4 }"/>
                       <c:set var="end" value="${page.pageNow + 4}"/>
                       <c:if test="${begin < 1 }">
                           <c:set var="begin" value="1"/>
                           <c:set var="end" value="10"/>
                       c:if>
                       <c:if test="${end > page.totalPageCount }">
                           <c:set var="begin" value="${page.totalPageCount-5 }"/>
                           <c:set var="end" value="${page.totalPageCount }"/>
                       c:if>
                   c:otherwise>
               c:choose>

               <%--上一页 --%>
               <c:choose>
                   <c:when test="${page.pageNow eq 1 }">
                       <%--当前页为第一页，隐藏上一页按钮--%>
                   c:when>
                   <c:otherwise>
                       <a href="?pageNow=${page.pageNow-1}" class="btn btn-default"><span class="fa fa-angle-left">span>a>

                   c:otherwise>
               c:choose>

               <%--显示第一页的页码--%>
               <c:if test="${begin >= 2 }">
                   <a href="?pageNow=1" class="btn btn-default">1a>
               c:if>
               <%--显示点点点--%>
               <c:if test="${begin  > 2 }">
                   <button type="button" class="btn btn-default disabled" style="border: 0;">...button>
               c:if>

               <%--打印 页码--%>
               <c:forEach begin="${begin }" end="${end }" var="i">
                   <c:choose>
                       <c:when test="${i eq page.pageNow }">
                           <button type="button" class="btn btn-primary active" >${i}button>
                       c:when>
                       <c:otherwise>
                           <a href="?pageNow=${i}" class="btn btn-default ">${i }a>
                       c:otherwise>
                  c:choose>
               c:forEach>


               <%-- 显示点点点 --%>
               <c:if test="${end < page.totalPageCount-1 }">
                   <button type="button" class="btn btn-default disabled" style="border: 0;">...button>
               c:if>
               <%-- 显示最后一页的数字 --%>
               <c:if test="${end < page.totalPageCount }">
                   <a href="?pageNow=${page.totalPageCount}" class="btn btn-default">${page.totalPageCount}a>
               c:if>

               <%--下一页 --%>
               <c:choose>
                   <c:when test="${page.pageNow eq page.totalPageCount }">
                   <%--到了尾页隐藏，下一页按钮--%>
                   c:when>
                   <c:otherwise>
                       <a href="?pageNow=${page.pageNow+1}" class="btn btn-default"><span class="fa fa-angle-right">span>a>
                   c:otherwise>
               c:choose>

           div>
       div>

css 代码（写得很累赘）

/*分页*/
.container .btn {
    border: 1px solid #ddd!important;
    border-radius: 2px!important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04)!important;
}


.container .btn-primary {
    background-color: #398898!important;
    border-color:#398898!important;
}

.container .btn-default:hover {
    background-color: #398898!important;
    border-color: #398898!important;
    color: #ffffff !important;
}

.container .disabled:hover {
    cursor:text !important;
    background-color: #ffffff!important;
    border: 1px solid #ddd!important;
    color: #333333!important;
}

 

本文链接：https://liuyanzhao.com/6073.html