js-Implementierung eines Paging-Effekt-Beispiels

Ich glaube, jeder hat Baidu verwendet, um nach den gewünschten Informationen zu suchen. Jedes Mal, wenn wir nach etwas suchen, liefert uns Baidu viele, viele ähnliche und verwandte Ergebnisse, und es ist unmöglich, alle diese Ergebnisse auf einer Seite anzuzeigen. Die Darstellung ist normalerweise in viele Seiten unterteilt und wie folgt. Deshalb werden wir heute mitteilen, wie dieser Paging-Effekt erreicht wird.

Zuerst beobachten wir dieses Paging

1. Die Anzahl der auf einer Seite angezeigten Seitenzahlen ist festgelegt

2. Wenn die aktuelle Seitenzahl größer oder gleich 2 ist, wird die Schaltfläche „Vorherige Seite“ angezeigt. Wenn die Gesamtzahl der Seiten größer oder gleich der aktuell angezeigten Seitenzahl ist, wird die Schaltfläche „Vorherige Seite“ angezeigt. Die Schaltfläche „Nächste Seite“ wird angezeigt.

3. Wenn wir die Schaltflächen „Startseite“ und „Letzte Seite“ hinzufügen möchten und die Startseite nicht auf der Seite angezeigt werden kann, Fügen Sie eine „Home“-Schaltfläche hinzu. Fügen Sie eine Schaltfläche „Letzte Seite“ hinzu, wenn die letzte Seite nicht auf der Seite angezeigt werden kann.

4. Nachdem die oben genannte Situation festgestellt wurde, ist es an der Zeit, sie aufzuschlüsseln und von Fall zu Fall zu besprechen. Zunächst unterteilen wir es in zwei Hauptsituationen: Wenn die Anzahl der auf der Seite angezeigten Seiten größer oder gleich der Gesamtzahl der Seiten ist und wenn die Anzahl der auf der Seite angezeigten Seiten kleiner als die Gesamtzahl der Seiten ist. Die erste Situation ist relativ einfach und wird nicht im Detail erläutert. Sie lässt sich hauptsächlich in drei Situationen unterteilen, in denen die Gesamtzahl der Seiten größer ist als die Anzahl der Seiten, die auf der Seite angezeigt werden können: 1. Die Seitenzahl der aktuellen Seite Die Seite ist kleiner oder gleich der Anzahl der Seiten, die auf der Seite angezeigt werden können, wenn die Hälfte der Zahl 2 beträgt, wenn die aktuelle Seite die letzten Seiten ist und in anderen Situationen außer den beiden oben genannten.

Die Textbeschreibung ist möglicherweise etwas schwer zu verstehen. Gehen wir daher direkt zum Beispiel. Zum leichteren Verständnis gibt es detaillierte Kommentare in js (zuallererst die Anzahl der angezeigten Seiten). Die Anzahl der Seiten auf der Seite beträgt 5. Wie viele Seiten sollten dynamisch über Ajax im tatsächlichen Projekt abgerufen werden? Anschließend wird die Gesamtzahl der Seiten automatisch basierend auf der Datenmenge abgerufen. Um das Verständnis zu erleichtern, verwende ich simuliert Daten hier)

HTML-Code:

<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>

Der annotierte Teil ist das, was wir dynamisch über js hinzufügen möchten.

CSS-Code:

    <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>

JS-Code:

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

    var arr=[];
    var iNow = 9;
    page({
        id:'p1',
        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('a');
            oA.href = '#1';
            oA.innerHTML = '首页';
            obj.appendChild(oA);
        }
        if(nowNum>=2){//只要页码大于等于2就会出现上一页
            var oA = document.createElement('a');
            oA.href = '#'+(nowNum - 1);
            oA.innerHTML = '上一页';
            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;
            }
        }
    }

Verwandte Empfehlungen:

Über PHP-Paging-Code Einfach Implementierung

PHP implementiert Baidu-ähnliches Paging

So erstellen Sie einen Paging-Effekt mit jquery

Das obige ist der detaillierte Inhalt vonjs-Implementierung eines Paging-Effekt-Beispiels. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!