ページング効果のjs実装例

誰もが欲しい情報を検索するために Baidu を使用したことがあると思います。何かを検索するたびに、Baidu は非常に多くの類似した結果や関連する結果を返しますが、これらの結果をすべて 1 つのページに表示することは一般的には不可能です。多くのページに分かれており、レンダリングは次のようになります。そこで今日は、このページング効果がどのように達成されるかを共有します。

まずこのページングを観察します

1. 1ページに表示されるページ番号の数は固定されています

2. 現在のページ番号が2以上の場合、「前ページ」ボタンが始まります総ページ数が1以上の場合、「次のページ」ボタンの表示を開始します

3. 「ホーム」と「最後のページ」を追加したい場合ボタンを使用すると、ページ時間にホームページが表示されない場合は、「ホーム」ボタンを追加します。ページ上に最後のページを表示できない場合は、「最後のページ」ボタンを追加します。

4. 上記の状況が決定したら、状況に基づいてそれを細分化し、議論するときが来ます。まず、ページに表示されているページ数が総ページ数以上である場合と、ページに表示されているページ数が総ページ数未満である場合の 2 つの状況に大きく分けられます。前者の状況は比較的単純であるため、詳細は説明しません。総ページ数がページに表示できるページ数よりも大きい場合は、主に 3 つの状況に分けられます。 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>

コメント部分は、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 : [
            '效果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;
            }
        }
    }

関連する推奨事項:

PHPページネーションコードの簡単な実装について

Baiduページング模倣を実装するためのphp

jqueryでページング効果を作成する方法

以上がページング効果のjs実装例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。