SSM博客实战(2)--实现分页效果

avatar 2017年08月26日18:06:16 1 4337 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
分页是JAVA WEB项目常用的功能，今天在Spring MVC中实现了简单的分页操作和搜索分页，在此记录一下。使用的框架为SSM（MyBatis+SpringMVC+Spring）。

先上效果图


一、Java 工具类


Page.java
  1. package com.liuyanzhao.blog.util.others;
  3. /**
  4.  * 分页
  5.  * Created by 言曌 on 2017/8/26.
  6.  */
  7. import java.io.Serializable;
  9. public class Page implements Serializable {
  11.     private static final long serialVersionUID = -3198048449643774660L;
  13.     private int pageNow = 1; // 当前页数
  15.     private int pageSize = 10; // 每页显示记录的条数
  17.     private int totalCount; // 总的记录条数
  19.     private int totalPageCount; // 总的页数
  21.     @SuppressWarnings("unused")
  22.     private int startPos; // 开始位置，从0开始
  24.     @SuppressWarnings("unused")
  25.     private boolean hasFirst;// 是否有首页
  27.     @SuppressWarnings("unused")
  28.     private boolean hasPre;// 是否有前一页
  30.     @SuppressWarnings("unused")
  31.     private boolean hasNext;// 是否有下一页
  33.     @SuppressWarnings("unused")
  34.     private boolean hasLast;// 是否有最后一页
  36.     /**
  37.      * 通过构造函数 传入  总记录数  和  当前页
  38.      * @param totalCount
  39.      * @param pageNow
  40.      */
  41.     public Page(int totalCount, int pageNow) {
  42.         this.totalCount = totalCount;
  43.         this.pageNow = pageNow;
  44.     }
  46.     /**
  47.      * 取得总页数，总页数=总记录数/总页数
  48.      * @return
  49.      */
  50.     public int getTotalPageCount() {
  51.         totalPageCount = getTotalCount() / getPageSize();
  52.         return (totalCount % pageSize == 0) ? totalPageCount
  53.             : totalPageCount + 1;
  54.     }
  56.     public void setTotalPageCount(int totalPageCount) {
  57.         this.totalPageCount = totalPageCount;
  58.     }
  60.     public int getPageNow() {
  61.         return pageNow;
  62.     }
  64.     public void setPageNow(int pageNow) {
  65.         this.pageNow = pageNow;
  66.     }
  68.     public int getPageSize() {
  69.         return pageSize;
  70.     }
  72.     public void setPageSize(int pageSize) {
  73.         this.pageSize = pageSize;
  74.     }
  76.     public int getTotalCount() {
  77.         return totalCount;
  78.     }
  80.     public void setTotalCount(int totalCount) {
  81.         this.totalCount = totalCount;
  82.     }
  83.     /**
  84.      * 取得选择记录的初始位置
  85.      * @return
  86.      */
  87.     public int getStartPos() {
  88.         return (pageNow - 1) * pageSize;
  89.     }
  91.     public void setStartPos(int startPos) {
  92.         this.startPos = startPos;
  93.     }
  95.     /**
  96.      * 是否是第一页
  97.      * @return
  98.      */
  99.     public boolean isHasFirst() {
  100.         return (pageNow == 1) ? false : true;
  101.     }
  103.     public void setHasFirst(boolean hasFirst) {
  104.         this.hasFirst = hasFirst;
  105.     }
  106.     /**
  107.      * 是否有首页
  108.      * @return
  109.      */
  110.     public boolean isHasPre() {
  111.         // 如果有首页就有前一页，因为有首页就不是第一页
  112.         return isHasFirst() ? true : false;
  113.     }
  115.     public void setHasPre(boolean hasPre) {
  116.         this.hasPre = hasPre;
  117.     }
  118.     /**
  119.      * 是否有下一页
  120.      * @return
  121.      */
  122.     public boolean isHasNext() {
  123.         // 如果有尾页就有下一页，因为有尾页表明不是最后一页
  124.         return isHasLast() ? true : false;
  125.     }
  127.     public void setHasNext(boolean hasNext) {
  128.         this.hasNext = hasNext;
  129.     }
  130.     /**
  131.      * 是否有尾页
  132.      * @return
  133.      */
  134.     public boolean isHasLast() {
  135.         // 如果不是最后一页就有尾页
  136.         return (pageNow == getTotalCount()) ? false : true;
  137.     }
  139.     public void setHasLast(boolean hasLast) {
  140.         this.hasLast = hasLast;
  141.     }
  143. }


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


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

当然大家也可以用 DAO 的方式
  • ArticleMapperCustom.xml

  1. <!-- 查询文章记录总数 -->
  2. <select id="getArticleCount" resultType="int">
  3.     select count(*) from article
  4. </select>
  6. <!--通过分页查询文章-->
  7. <select id="selectArticleByPage" resultType="com.liuyanzhao.blog.po.custom.ArticleCustom">
  8.     select * from article limit #{startPos},#{pageSize}
  9. </select>


  • ArticleMapperCustom.java

  1. //分页操作
  2. public List<ArticleCustom> selectArticleByPage(@Param(value="startPos") Integer startPos,@Param(value="pageSize") Integer pageSize) throws Exception;


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


  • ArticleService.java  （接口）

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

  • ArticleServiceImpl.java  （实现类）

  1. @Override
  2.     public void showArticleByPage(HttpServletRequest request, Model model) throws Exception {
  3.         String pageNow = request.getParameter("pageNow");
  5.         Page page = null;
  7.         List<ArticleCustom> articleList = new ArrayList<ArticleCustom>();
  9.         int totalCount = articleMapperCustom.getArticleCount();
  11.         if (pageNow != null) {
  12.             page = new Page(totalCount, Integer.parseInt(pageNow));
  13.             articleList = this.articleMapperCustom.selectArticleByPage(page.getStartPos(), page.getPageSize());
  14.         } else {
  15.             page = new Page(totalCount, 1);
  16.             articleList = this.articleMapperCustom.selectArticleByPage(page.getStartPos(), page.getPageSize());
  17.         }
  19.         model.addAttribute("articleList", articleList);
  20.         model.addAttribute("page", page);
  21.     }


四、编辑控制层  Controller 类


IndexController.java
  1. @Autowired
  2. private ArticleService articleService;
  4. //首页文章分页显示
  5. @RequestMapping("/")
  6. public String IndexView(HttpServletRequest request, Model model) throws Exception {
  8.     //此处的articleService是注入的articleService接口的对象
  9.     articleService.showArticleByPage(request, model);
  11.     return "/WEB-INF/Home/Index/index.jsp";
  12. }

注意：

这里的 articleService 需要注入，在 spring 配置文件中添加
  1. <!-- 用户管理的service -->
  2. bean id="userService" class="com.liuyanzhao.blog.service.impl.UserServiceImpl"/>


五、编辑视图层  JSP 文件


这里只将分页部分的代码贴出
  1. <!-- 分页功能 start -->
  2.            <div align="center">
  3.                <span>共 ${page.totalPageCount} 页</span> <span >第
  4.                ${page.pageNow} 页</span> <a href="?pageNow=1">首页</a>
  5.                <c:choose>
  6.                    <c:when test="${page.pageNow - 1 > 0}">
  7.                        <a href="?pageNow=${page.pageNow - 1}">上一页</a>
  8.                    </c:when>
  9.                    <c:when test="${page.pageNow - 1 <= 0}">
  10.                        <a href="?pageNow=1">上一页</a>
  11.                    </c:when>
  12.                </c:choose>
  13.                <c:choose>
  14.                    <c:when test="${page.totalPageCount==0}">
  15.                        <a href="?pageNow=${page.pageNow}">下一页</a>
  16.                    </c:when>
  17.                    <c:when test="${page.pageNow + 1 < page.totalPageCount}">
  18.                        <a href="?pageNow=${page.pageNow + 1}">下一页</a>
  19.                    </c:when>
  20.                    <c:when test="${page.pageNow + 1 >= page.totalPageCount}">
  21.                        <a href="?pageNow=${page.totalPageCount}">下一页</a>
  22.                    </c:when>
  23.                </c:choose>
  24.                <c:choose>
  25.                    <c:when test="${page.totalPageCount==0}">
  26.                        <a href="?pageNow=${page.pageNow}">尾页</a>
  27.                    </c:when>
  28.                    <c:otherwise>
  29.                        <a href="?pageNow=${page.totalPageCount}">尾页</a>
  30.                    </c:otherwise>
  31.                </c:choose>
  32.            </div>
  33.            <!-- 分页功能 End -->

注意：

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

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

@RequestMapping("/") 里是 / ，

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



这个效果图如下






六、美化分页


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

我用的是 Bootstrap 和 Font Awesome 的图标

  1. <div class="divBody">
  2.            <div class="divContent">
  4.                <c:choose>
  5.                    <c:when test="${page.totalPageCount <= 10 }">
  6.                        <c:set var="begin" value="1"/>
  7.                        <c:set var="end" value="${page.totalPageCount }"/>
  8.                    </c:when>
  9.                    <c:otherwise>
  10.                        <c:set var="begin" value="${page.pageNow-4 }"/>
  11.                        <c:set var="end" value="${page.pageNow + 4}"/>
  12.                        <c:if test="${begin < 1 }">
  13.                            <c:set var="begin" value="1"/>
  14.                            <c:set var="end" value="10"/>
  15.                        </c:if>
  16.                        <c:if test="${end > page.totalPageCount }">
  17.                            <c:set var="begin" value="${page.totalPageCount-5 }"/>
  18.                            <c:set var="end" value="${page.totalPageCount }"/>
  19.                        </c:if>
  20.                    </c:otherwise>
  21.                </c:choose>
  23.                <%--上一页 --%>
  24.                <c:choose>
  25.                    <c:when test="${page.pageNow eq 1 }">
  26.                        <%--当前页为第一页，隐藏上一页按钮--%>
  27.                    </c:when>
  28.                    <c:otherwise>
  29.                        <a href="?pageNow=${page.pageNow-1}" class="btn btn-default"><span class="fa fa-angle-left"></span></a>
  31.                    </c:otherwise>
  32.                </c:choose>
  34.                <%--显示第一页的页码--%>
  35.                <c:if test="${begin >= 2 }">
  36.                    <a href="?pageNow=1" class="btn btn-default">1</a>
  37.                </c:if>
  38.                <%--显示点点点--%>
  39.                <c:if test="${begin  > 2 }">
  40.                    <button type="button" class="btn btn-default disabled" style="border: 0;">...</button>
  41.                </c:if>
  43.                <%--打印 页码--%>
  44.                <c:forEach begin="${begin }" end="${end }" var="i">
  45.                    <c:choose>
  46.                        <c:when test="${i eq page.pageNow }">
  47.                            <button type="button" class="btn btn-primary active" >${i}</button>
  48.                        </c:when>
  49.                        <c:otherwise>
  50.                            <a href="?pageNow=${i}" class="btn btn-default ">${i }</a>
  51.                        </c:otherwise>
  52.                   </c:choose>
  53.                </c:forEach>
  56.                <%-- 显示点点点 --%>
  57.                <c:if test="${end < page.totalPageCount-1 }">
  58.                    <button type="button" class="btn btn-default disabled" style="border: 0;">...</button>
  59.                </c:if>
  60.                <%-- 显示最后一页的数字 --%>
  61.                <c:if test="${end < page.totalPageCount }">
  62.                    <a href="?pageNow=${page.totalPageCount}" class="btn btn-default">${page.totalPageCount}</a>
  63.                </c:if>
  65.                <%--下一页 --%>
  66.                <c:choose>
  67.                    <c:when test="${page.pageNow eq page.totalPageCount }">
  68.                    <%--到了尾页隐藏，下一页按钮--%>
  69.                    </c:when>
  70.                    <c:otherwise>
  71.                        <a href="?pageNow=${page.pageNow+1}" class="btn btn-default"><span class="fa fa-angle-right"></span></a>
  72.                    </c:otherwise>
  73.                </c:choose>
  75.            </div>
  76.        </div>

css 代码（写得很累赘）
  1. /*分页*/
  2. .container .btn {
  3.     border: 1px solid #ddd!important;
  4.     border-radius: 2px!important;
  5.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04)!important;
  6. }
  9. .container .btn-primary {
  10.     background-color: #398898!important;
  11.     border-color:#398898!important;
  12. }
  14. .container .btn-default:hover {
  15.     background-color: #398898!important;
  16.     border-color: #398898!important;
  17.     color: #ffffff !important;
  18. }
  20. .container .disabled:hover {
  21.     cursor:text !important;
  22.     background-color: #ffffff!important;
  23.     border: 1px solid #ddd!important;
  24.     color: #333333!important;
  25. }



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

历史上的今天
八月
26日
  • 微信
  • 交流学习，服务定制
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0