前端分页案例

前言

• 最近做的事情偏前端，后台查询好分页数据，前端进行分页，先来观察一下实现。以网易云pc某一首歌的评论为例吧（懒得打开项目了）。

• 控制台实现的分页 控制台demo下载传送门

• 控制台实现的分页 jsp实现传送门

分析

• 可以看到当前页是 第8页
• 显示的页号范围是当前页-3 和 当前页+3
• 必要时额外显示箭头和第一页最后一页
• 超过一定距离显示成省略号

模拟实现

• 这里我使用java在控制台实现

    private static int length = 6;//基础信息,显示的按钮个数，条件允许额外加上第一页和最后一页
    private static int ignoreLength = 1;//省略号所含按钮最小值
    private static int half = length / 2;

• 根据当前页号，和总页数来计算出开始页号和结束页号。

        int begin = pageNo-half;
        int end = pageNo + half;

        pageNo=pageNo<1?1:pageNo;
        if(begin < 1){
            begin = 1;
            end = begin + length;
        }
        if(end>total){
            end = total;
            begin = total - length;
        }
        end=total==0?1:end;
        begin = begin<1?1:begin;

• 特殊条件处理

    if(pageNo !=1){
            System.out.print("首页");
            System.out.print("  上一页  ");
        }

        if(begin - 1 > ignoreLength){
            System.out.print("【1】");
            System.out.print(" ... ");
        }

        for(int j=begin;j<=end;j++){
            if(j == pageNo){
                System.out.print( " ["+j+"] "); //当前页面
            }else{
                System.out.print( j+" ");   
            }
        }
        if(total - end > ignoreLength){
            System.out.print("  ...  ");
        }

        if(end < total){//end没到末尾就补齐最后页号
            System.out.print("【"+total+"】");    
        }

        //isLast
        if(pageNo != end){//当前页号不等于总页数的时候显示下一页 末页
            System.out.print("  下一页");
            System.out.print("  末页");
        }

1-10页的效果

• 聪明的你一定知道，System.out输出的地方换成html就是前端效果啦