通用的分页思路

素颜马尾好姑娘i 2022-06-17 06:51 201阅读 0赞

### 最终效果如下 ###

![这里写图片描述][SouthEast]

![这里写图片描述][SouthEast 1]

#### 思路 ####

前台需要展示的是一页一页的数据，每一页包含的信息有两个：当前页数(pageNow)、每一页有条数据(pageSize)。其他的事情前台不用关心，它的目的只是展示数据。而数据的来源在后台，前台告诉后台需要哪一页的数据以及这一页有多少条数据，pageSize是可以设定的，所以pageNow是前台和后台交互的核心。那么后台接收到前台的pageNow，要去识别它，根据这个参数到数据库取得数据返回给前台。  
先说说pageNow，pageNow的值怎么设置？当然是后台告诉前台一共有多少页(totalPageCount)，然后前台要展示的数据就在0~totalPageCount页之间，当前的处于哪一页就是pageNow的值；而pageSize，每一页记录数，这很好理解，每一页要展示多少数据。而pageSize(每一页记录数) \* totalPageCount(页数) = 数据库中该表的记录总数(totalCount)。所以后台关心的有4个变量：pageNow、pageSize、totalPageCount、totalCount。这里的totalCount是已知的，数据库表的记录数，根据前台页面的展示效果如果pageSize确定，那么totalPageCount = totalCount / pageSize，而 pageNow 是前台数据的选择页。

#### 例子 ####

这里以mysql数据库，java ssm后台，前台bootstrap为例。

1).既然分页思路是通用的，把分页写成一个工具类，放在util包中，它与业务逻辑是没有关系的

package com.xforce.charles.util;
    
    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;  
        }  
    
    }

2).场景：前端向后台请求数据，传递pageNow参数

<a href="goindex?pageNow=2">Previous</a>

3).后台接收pageNow参数，向service层要数据

//先假设为第一页
        int pageNow = 1;
        //接收前台传递的当前页数
        String s_pageNow = request.getParameter("pageNow");
        //如果页面第一次进入，默认展示第一页的数据，这时前台是没有传递给后台当前页面参数的
        if(null != s_pageNow) {
            pageNow = Integer.parseInt(s_pageNow);
        }
        //获取记录总数
        int tatolCount = statusService.getStatusCount();
        //page根据tatolCount和pageNow计算出需要的记录数在数据库中的位置范围
        Page page = new Page(tatolCount, pageNow);
        List<StatusAndProductWrapper> statusAndProductWrapperList = 
            statusService.getStatusAndProductWrapper(page.getStartPos(), page.getPageSize());
        //将数据返回给前端
        model.addAttribute("statusAndProductWrapperList", statusAndProductWrapperList); 
        model.addAttribute("page", page);

4).service层调用dao层

###### interface ######

//获取用户状态信息
        List<StatusAndProductWrapper> getStatusAndProductWrapper(int startPos, int pageSize);
        //获取用户状态的记录数
        int getStatusCount();

###### Impl ######

public List<StatusAndProductWrapper> getStatusAndProductWrapper(int startPos, int pageSize) {
            return statusDao.selectStatusAndProductWrapperByPage(startPos, pageSize);
        }
    
        public int getStatusCount() {
            return statusDao.selectStatusCount();
        }

5).dao层

###### interface ######

//分页获取记录
      List<StatusAndProductWrapper> selectStatusAndProductWrapperByPage( @Param(value="startPos") Integer startPos, @Param(value="pageSize") Integer pageSize);  
       //得到记录总数
       int selectStatusCount();

###### Mapping ######

<select id="selectStatusAndProductWrapperByPage" resultType="com.xforce.charles.model.StatusAndProductWrapper">
         select ... from ... limit #{startPos}, #{pageSize}
      </select>
      <select id="selectStatusCount" resultType="java.lang.Integer">
          select count(*) from status
      </select>

如果是sql server

<select id="selectStatusAndProductWrapperByPage" resultType="com.xforce.charles.model.StatusAndProductWrapper">
         select top #{pageSize} ... from ... where ... not in(select top #{startPos} id from ...)
      </select>

如果是oracle

<select id="selectStatusAndProductWrapperByPage" resultType="com.xforce.charles.model.StatusAndProductWrapper">
         select ... from (select ROWNUM rn, ... from (select ... from ... order by id asc) where ROWNUM <= (#{startPos} + #{pageSize}) ) ... where ....rn >= #{startPos};
      </select>

6).前台展示，这里用bootstrap的样式

<ul class="pager">
         <c:choose>  
             <c:when test="${page.pageNow - 1 > 0}">  
                 <li><a href="goindex?pageNow=${page.pageNow - 1}">Previous</a></li>  
             </c:when>  
             <c:when test="${page.pageNow - 1 <= 0}">  
                 <li><a href="goindex?pageNow=1">Previous</a></li>  
             </c:when>  
         </c:choose>
         <li><a href="goindex?pageNow=${page.pageNow}">${page.pageNow}/${page.totalPageCount}</a></li>
         <c:choose>  
             <c:when test="${page.totalPageCount==0}">  
                 <li><a href="goindex?pageNow=${page.pageNow}">Next</a></li>  
             </c:when>  
             <c:when test="${page.pageNow + 1 < page.totalPageCount}">  
                 <li><a href="goindex?pageNow=${page.pageNow + 1}">Next</a></li>  
             </c:when>  
             <c:when test="${page.pageNow + 1 >= page.totalPageCount}">  
                 <li><a href="goindex?pageNow=${page.totalPageCount}">Next</a></li>
             </c:when>  
         </c:choose>  
    </ul>

7).总而言之，分页思路的逻辑是通用的。跟数据库、后台语言、前端框架无关

[SouthEast]: /images/20220617/fd6670e6c56245fc9b5feaf8715a895a.png
[SouthEast 1]: /images/20220617/b623491ad8684f4a917317a42315811d.png