js实现分页的效果实例-tutorial js-php.cn

js实现分页的效果实例

小云云

Lepaskan： 2018-03-19 17:01:43

asal

1971 orang telah melayarinya

想必大家都用过百度查找过我们想要的信息，每次我们查找东西的时候，百度都会返给我们很多很多相似和有关的结果，而这些结果是不可能一页就显示完全的，一般都会分很多很多页，效果图如下。所以我们今天就是要分享一下，这个分页效果是怎么实现的。

百度分页图

首先我们观察这个分页

一页中显示的页码数是固定的
当当期页码大于等于2的时候，开始显示‘上一页’按钮，当总页数比当前显示的页码大于等于1的时候，开始显示'下一页'按钮的按钮
如果我们想要添加‘首页’和‘尾页’按钮的话，那当首页不能在页面显示的时候，添加‘首页’按钮。如果尾页不能显示在页面的时候添加‘尾页’按钮。
上面的情况确定之后，就是要进行细分的了，分情况进行讨论。首先我们分两大种情况：当页面显示的页数大于等于总页数的时候以及当页面显示的页数小于总页数的时候两种情况。前一种情况比较简单，就不再细说了，主要是当总页数比页面能显示的页数大的时候还要分三种情况：1、当前页的页码小于等于页面中能显示页数的二分之一时2、当前页为最后的几页的时候，以及除了上面两种情况的其他的情况。

文字描述可能有点难懂，所以接下来我们直接上例子，js中有详细的注释方便理解（首先说明，页面中显示的页数为5，至于有多少页如果在实际项目中应该是通过ajax动态获取数据的，然后根据数据的多少自动获得总页数。为了方便理解这里我是用的模拟数据）

HTML代码：

<ul id="ul1"></ul>
<p id="p1">
    <!--<a href="#1">首页</a>
    <a href="#3">上一页</a>
    <a href="#2">[2]</a>
    <a href="#3">[3]</a>
    <a href="#4">4</a>
    <a href="#5">[5]</a>
    <a href="#6">[6]</a>
    <a href="#5">下一页</a>
    <a href="#10">尾页</a>-->
</p>

Salin selepas log masuk

注释的部分是我们要通过js动态添加的。

CSS代码：

    <style>
        *{ margin:0; padding:0;}
        li{ list-style:none;}
        #ul1{ width:600px; height:250px;}
        #ul1 li{ width:100px; height:100px; background:red; float:left; overflow:hidden; margin:10px;}
        a{ margin:5px;}
    </style>

Salin selepas log masuk

js代码：

    var json = {
        title : [
            &#39;效果1&#39;,
            &#39;效果2&#39;,
            &#39;效果3&#39;,
            &#39;效果4&#39;,
            &#39;效果5&#39;,
            &#39;效果6&#39;,
            &#39;效果7&#39;,
            &#39;效果8&#39;,
            &#39;效果9&#39;,
            &#39;效果10&#39;,
            &#39;效果11&#39;,
            &#39;效果12&#39;,
            &#39;效果13&#39;,
            &#39;效果14&#39;,
            &#39;效果15&#39;,
            &#39;效果16&#39;,
            &#39;效果17&#39;,
            &#39;效果18&#39;,
            &#39;效果19&#39;,
            &#39;效果20&#39;,
            &#39;效果21&#39;,
            &#39;效果22&#39;,
            &#39;效果23&#39;,
            &#39;效果24&#39;,
            &#39;效果25&#39;,
            &#39;效果26&#39;,
            &#39;效果27&#39;,
            &#39;效果28&#39;,
            &#39;效果29&#39;,
            &#39;效果30&#39;,
            &#39;效果31&#39;,
            &#39;效果32&#39;,
            &#39;效果33&#39;,
            &#39;效果34&#39;,
            &#39;效果35&#39;,
            &#39;效果36&#39;,
            &#39;效果37&#39;,
            &#39;效果38&#39;,
            &#39;效果39&#39;,
            &#39;效果40&#39;,
            &#39;效果41&#39;,
            &#39;效果42&#39;,
            &#39;效果43&#39;,
            &#39;效果44&#39;,
            &#39;效果45&#39;,
            &#39;效果46&#39;,
            &#39;效果47&#39;,
            &#39;效果48&#39;,
            &#39;效果49&#39;,
            &#39;效果50&#39;,
            &#39;效果51&#39;
        ]
    };

Salin selepas log masuk

    var arr=[];
    var iNow = 9;
    page({
        id:&#39;p1&#39;,
        nowNum:1,
        allNum:Math.floor(json.title.length/10),
        callBack:function(){alert(0)}
    });

    function page(opt){
        if(!opt.id){
            return false;
        }
        var obj = document.getElementById(opt.id);
        var nowNum = opt.nowNum||1;
        var allNum = opt.allNum||5;
        var callBack = opt.callBack||function(){};
        if(nowNum>=4&&allNum>=6){//首页出现的情况，就是当现在的页码大于等于4并且总页码大于等于6时
            var oA = document.createElement(&#39;a&#39;);
            oA.href = &#39;#1&#39;;
            oA.innerHTML = &#39;首页&#39;;
            obj.appendChild(oA);
        }
        if(nowNum>=2){//只要页码大于等于2就会出现上一页
            var oA = document.createElement(&#39;a&#39;);
            oA.href = &#39;#&#39;+(nowNum - 1);
            oA.innerHTML = &#39;上一页&#39;;
            obj.appendChild(oA);
        }
        if(allNum<=5){//因为我们让一页最多显示5个页码，所以，如果总页码小与等于5，就说明页码可以显示完全
            for(var i=1;i<=allNum;i++){
                var oA = document.createElement(&#39;a&#39;);
                oA.href = &#39;#&#39;+i;
                if(nowNum==i){
                    oA.innerHTML = i;
                }else{
                    oA.innerHTML = &#39;[&#39;+i+&#39;]&#39;;
                }
                obj.appendChild(oA);
            }
        }
        else{//下面的情况是当总页码大于5的时候进行的分类
            for(var i=1; i<=5;i++){
                var oA = document.createElement(&#39;a&#39;);
                if(nowNum == 1||nowNum==2){//在总页数大于5的情况下继续根据当前页进行细分。如果当前的页为1或者为2的时候
                    oA.href = &#39;#&#39;+i;
                    if(nowNum ==i){
                        oA.innerHTML = i;
                    }else{
                        oA.innerHTML = &#39;[&#39;+i+&#39;]&#39;
                    }
                }else if((allNum - nowNum)==0||(allNum - nowNum)==1){//如果当前页为最后一页或者倒数第二页的时候，说明显示的5页即为最后5页，所以就是下面的公式
                    oA.href = &#39;#&#39;+(allNum - 5+i);
                    if((allNum - nowNum)==0&&i==5){
                        oA.innerHTML = (allNum - 5 + i);
                    }else if((allNum - nowNum)==1&&i==4){
                        oA.innerHTML = (allNum - 5 +i);
                    }else{
                        oA.innerHTML = &#39;[&#39;+(allNum - 5 +i)+&#39;]&#39;
                    }
                }else{//当前页码处在5个页码的中间的时候
                    oA.href = &#39;#&#39;+(nowNum - 3 +i);
                    if(i==3){
                        oA.innerHTML = (nowNum - 3 + i);
                    }else{
                        oA.innerHTML = &#39;[&#39;+(nowNum - 3 +i)+&#39;]&#39;
                    }
                }
                obj.appendChild(oA);
            }
        }
        if((allNum - nowNum)>=1){//如果总页数比当前页码大于等于1的时候显示‘下一页’
            var oA = document.createElement(&#39;a&#39;);
            oA.href = &#39;#&#39;+(nowNum+1);
            oA.innerHTML = &#39;下一页&#39;;
            obj.appendChild(oA);
        }
        if((allNum - nowNum)>=3&&allNum>=6){//如果总页数比当前页码大于等于3并且总页码大于等于6的时候显示‘尾页’；
            var oA = document.createElement(&#39;a&#39;);
            oA.href = &#39;#&#39;+allNum;
            oA.innerHTML = &#39;尾页&#39;;
            obj.appendChild(oA);

        }
        callBack(nowNum,allNum);
        var aA = obj.getElementsByTagName(&#39;a&#39;);
        for(var i=0; i<aA.length;i++){
            aA[i].onclick = function(){
                var nowNum = parseInt(this.getAttribute(&#39;href&#39;).substring(1));//得到当前的页码数
                obj.innerHTML = &#39;&#39;;
                page({
                    id : opt.id,
                    nowNum : nowNum,
                    allNum : allNum,
                    callBack : callBack}

                );
                return false;
            }
        }
    }

Salin selepas log masuk