Node.js의 페이징 효과 구현 예-JS 튜토리얼-php.cn

Node.js의 페이징 효과 구현 예

小云云

풀어 주다： 2018-03-19 17:01:43

원래의

1971명이 탐색했습니다.

우리가 원하는 정보를 검색하기 위해 모두가 Baidu를 사용했다고 믿습니다. 우리가 무언가를 검색할 때마다 Baidu는 유사하고 관련된 많은 결과를 반환하며 일반적으로 이러한 모든 결과를 한 페이지에 표시하는 것은 불가능합니다. 여러 페이지로 나누어지며 렌더링은 다음과 같습니다. 그래서 오늘 우리는 이 페이징 효과가 어떻게 달성되는지 공유하려고 합니다.

Node.js의 페이징 효과 구현 예

먼저 이 페이징을 관찰합니다.

한 페이지에 표시되는 페이지 번호는 고정되어 있습니다.
현재 페이지 번호가 2보다 크거나 같으면 '이전 페이지' 버튼이 시작됩니다. 전체 페이지가 표시될 때 현재 표시된 페이지 번호의 비율이 1보다 크거나 같을 때 '다음 페이지' 버튼 표시를 시작합니다
'홈'과 '마지막 페이지'를 추가하려면 ' 버튼을 누르면 페이지 시간에 홈 페이지가 표시되지 않습니다. '홈' 버튼을 추가하세요. 마지막 페이지를 페이지에 표시할 수 없는 경우 '마지막 페이지' 버튼을 추가하세요.
위의 상황이 파악된 후에는 상황에 따라 세분화하여 논의할 차례입니다. 먼저, 크게 두 가지 상황으로 나누어 보겠습니다. 페이지에 표시되는 페이지 수가 전체 페이지 수보다 크거나 같은 경우와, 페이지에 표시되는 페이지 수가 전체 페이지 수보다 적은 경우입니다. 전자의 경우는 상대적으로 간단하여 자세히 설명하지 않겠습니다. 총 페이지 수가 페이지에 표시할 수 있는 페이지 수보다 많은 경우는 주로 세 가지 상황으로 나누어집니다. 1. 현재 페이지 번호 페이지가 페이지에 표시할 수 있는 페이지 수보다 작거나 같은 경우 2, 현재 페이지가 마지막 몇 페이지인 경우 및 위의 두 가지 상황을 제외한 기타 상황입니다.

텍스트 설명이 조금 어려울 수 있으니 바로 예시로 들어가겠습니다. 이해하기 쉽도록 js에 자세한 설명이 있습니다. (우선 페이지에 표시되는 페이지 수는 5입니다. 실제 프로젝트에는 몇 페이지가 있어야 합니까? ajax를 통해 동적으로 데이터를 얻은 다음, 이해를 돕기 위해 전체 페이지 수를 자동으로 가져옵니다. 여기서는 시뮬레이션 데이터를 사용합니다.)

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>

로그인 후 복사

주석 부분은 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>

로그인 후 복사

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

로그인 후 복사

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

로그인 후 복사