js implémentation d'un exemple d'effet de pagination-js tutoriel-php.cn

js implémentation d'un exemple d'effet de pagination

小云云

Libérer： 2018-03-19 17:01:43

original

1970 Les gens l'ont consulté

Je crois que tout le monde a utilisé Baidu pour rechercher les informations souhaitées. Chaque fois que nous recherchons quelque chose, Baidu nous renvoie de très nombreux résultats similaires et liés, et il est impossible d'afficher tous ces résultats sur une seule page. , généralement divisé en plusieurs pages, le rendu est le suivant. Aujourd'hui, nous allons donc partager comment cet effet de pagination est obtenu.

js implémentation dun exemple deffet de pagination

On observe d'abord cette pagination

Le nombre de numéros de page affichés sur une page est fixe
Lorsque le numéro de page actuel est supérieur ou égal à 2, le bouton 'Page précédente' commence à s'afficher. Lorsque le nombre total de pages est supérieur ou égal au numéro de page actuellement affiché, le bouton 'Page suivante' commence à s'afficher
Si l'on souhaite ajouter des boutons 'Accueil' et 'Dernière page', alors lorsque la page d'accueil ne peut pas être affichée sur la page, ajoutez un bouton « Accueil ». Ajoutez un bouton « Dernière page » si la dernière page ne peut pas être affichée sur la page.
Une fois la situation ci-dessus déterminée, il est temps de la décomposer et d'en discuter au cas par cas. Premièrement, nous le divisons en deux situations majeures : lorsque le nombre de pages affichées sur la page est supérieur ou égal au nombre total de pages, et lorsque le nombre de pages affichées sur la page est inférieur au nombre total de pages. La première situation est relativement simple et ne sera pas expliquée en détail. Elle se divise principalement en trois situations dans lesquelles le nombre total de pages est supérieur au nombre de pages pouvant être affichées sur la page : 1. Le numéro de page du document actuel. la page est inférieure ou égale au nombre de pages pouvant être affichées sur la page lorsque la moitié du nombre 2, lorsque la page actuelle correspond aux dernières pages, et dans d'autres situations à l'exception des deux situations ci-dessus.

La description du texte est peut-être un peu difficile à comprendre, passons donc directement à l'exemple. Il y a des commentaires détaillés en js pour faciliter la compréhension (tout d'abord, le nombre de pages affichées). dans la page est 5. Quant au nombre de pages qui doivent être obtenues dynamiquement via ajax dans le projet réel, puis le nombre total de pages sera automatiquement obtenu en fonction de la quantité de données Afin de faciliter la compréhension, j'utilise une simulation. données ici)

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

Copier après la connexion

La partie annotée est ce que nous voulons ajouter dynamiquement via js.

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

Copier après la connexion

Code 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;
        ]
    };

Copier après la connexion

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

Copier après la connexion

Recommandations associées :

À propos du code de pagination php Simple implémentation

PHP implémente une pagination de type Baidu

Comment créer un effet de pagination avec jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!