您现在的位置:首页 >> 前端 >> 内容

前端分页实现

时间:2017/9/15 10:18:00 点击:

  核心提示:前言最近做的事情偏前端,后台查询好分页数据,前端进行分页,先来观察一下实现。以网易云pc某一首歌的评论为例吧(懒得打开项目了)。控制台实现的分页 demo下载传送门分析可以看到当前页是 第8页 显示的...

前言

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

前端分页实现

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

分析

可以看到当前页是 第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就是前端效果啦

前端分页实现

作者:网络 来源:独行侠梦的博客