データページング効果を実現する js オブジェクト

この記事の例では、データのページング効果を実現するためのjsオブジェクトの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

データページングを実装するには、この側面の設計を明確にする必要があります。

1. まず、次のようにバックエンドデータベースをシミュレートして確立します。

var peoson = [
    {
    "id":"1",
        " name":"ジュ・ジンイー",
        "性別":"女性",
        "年齢":"25",
        "クラス":"クラス8",
        "habby":"ダンス",
        "スコア":"40",
        "住所":"陝西省西安市長安区"
},
{
    "id":"2",
    " name":"関暁同",
    "性別":"女性",
    "年齢":"20",
    "クラス":"クラス8",
    "habby":"ダンス",
    "スコア":"40",
    "住所":"陝西省西安市長安区"
},
{
    "id":"3",
    " name":"趙麗穎",
    "性別":"女性",
    "年齢":"26",
    "クラス":"クラス8",
    "habby":"ダンス",
    "スコア":"40",
    "住所":"陝西省西安市長安区"
},
{
    "id":"4",
    " name":"薛志謙",
    "性別":"男性",
    "年齢":"37",
    "クラス":"クラス8",
    "habby":"ダンス",
    "スコア":"40",
    "住所":"陝西省西安市長安区"
}
]

2. ページあたりのデータ量、現在のページ番号、合計ページ数を設定します。

関数を使用して、データの合計量をページあたりのデータ量で割って計算した合計ページ数を動的に設定します。
関数を使用して、各ページのどのデータが合計データからのものであるかを動的に設定します。

全ページ: 関数 () {
            this.allpage = Math.ceil(this.Message.length / this.perpage);
            console.log(このメッセージの長さ);
            コンソールにログ出力します。
        },
        Nowpagenum:function(n){
            var first=(n-1)*this.perpage; //0
            var last=n*this.perpage; //10
            this.nowpagenum =this.Message.slice(first,last);
        },

3. DOM要素を動的に作成し、最大のブロックにサブ要素を追加して各データを保存します。

ニュースを作成する:function() {
            this.list.innerHTML = "";
            (var i = 0; i < this.perpage; i++) の場合 {
                var page_list = document.createElement("div");
                page_list.className = "ページリスト";
                for (var key in this.nowpagenum[i]) {
                    var per_child = document.createElement("div");
                    per_child.className = "perchild";
                    page_list.appendChild(per_child);
                    per_child.innerHTML = this.nowpagenum[i][key];
                    //console.log(this.nowpagenum[i]);
                }
                this.list.appendChild(page_list);
            }
        },

4. リストの下にページ番号を作成し、前方インデント、後方インデント、前方と後方のインデントを行います。

総ページ数がであると仮定すると、現在のページ番号が 5 ページより大きい場合は、先頭インデントが実行され、前のページ番号が 2 から現在のページ番号から 1 を引いた数までインデントされます。
現在のページ番号が 16 未満の場合、後方にインデントされ、その間のページは前方と後方にインデントされます。

Page_ma:function(current,totle){
            var str="";
            for(var i=1;i <=totle;i++){
               if(i==2 && current-3>i ){ //ǰ���� current>5
                   i=現在-1;
                   str+="<li>...</li>";
               }
               そうでない場合、(i==current+4 && current+4<totle){
                   i=合計-1;
                   str+="<li>...</li>"; //������ 現在の<16

               }
               それ以外{
                   if(現在==i){
                   str+="<li class='minilist' style='background: pink'>"+i+"</li>";
                   }
                   それ以外{
                       str+="<li class='minilist'>"+i+"</li>";

                   }
               }
           }
           this .pageshu.innerHTML= str;
        },

5. ページをクリックすると、現在のページのデータにジャンプし、それに応じてインデントされます。

ページクリック:関数(){
            var mini_list = document.getElementsByClassName("ミニリスト");
            for(var k=0;k <mini_list.length;k++){
               mini_list[k].onclick=関数(){
                  Fenye.nowpage = parseInt (this.innerHTML);
                 // console.log(this.innerHTML); //mini_list[k] �������ı� 
                  Fenye.Page_ma(Fenye.nowpage、Fenye.allpage);
                  Fenye.Pageclick();
                  Fenye.Createnews();
                  Fenye.Nowpagenum (Fenye.nowpage);

               }

6. 前のページまたは次のページをクリックするか、ジャンプ先のページ番号を設定すると、現在のページのデータにジャンプし、それに応じてインデントされます。

クリックイベント:関数(){

            Fenye.back.onclick =function(){
                Fenye.nowpage--;
                if(Fenye.nowpage<2){
                    フェニエ.nowpage=1;
                }
                Fenye.Page_ma(Fenye.nowpage、Fenye.allpage);
                Fenye.Pageclick();
                Fenye.Createnews();
                Fenye.Nowpagenum (Fenye.nowpage);

            };
            Fenye.go.onclick = 関数(){

                Fenye.nowpage>=Fenye.allpage){
                    Fenye.nowpage=Fenye.allpage;
                }
                Fenye.nowpage++;
                Fenye.Page_ma(Fenye.nowpage、Fenye.allpage);
                Fenye.Pageclick();
                Fenye.Createnews();
                Fenye.Nowpagenum (Fenye.nowpage);
            };
            Fenye.tiao.onclick = 関数(){
               var put = document.getElementById ("in_put");
                Fenye.nowpage = parseInt (put.value) ;
                if(put.value>=Fenye.allpage){
                    Fenye.nowpage = parseInt (put.value);
                }
                Fenye.Page_ma(Fenye.nowpage、Fenye.allpage);
                Fenye.Pageclick();
                Fenye.Createnews();
                Fenye.Nowpagenum (Fenye.nowpage);
            }

        }

HTMLとCSSの部分

<!DOCTYPE html>
<html>
<head lang="ja">
    <メタ文字セット="UTF-8">
    <タイトル></タイトル>
    <script src="js/message1.js" type="text/javascript"></script>
    <script src="js/pagenews.js" type="text/javascript"></script>
    <スタイル>
        *{
            マージン:0;
            パディング:0;
        }
        li{
            リストスタイル: なし;
        }
        。ブロック{
            位置: 相対的;
            幅:1200ピクセル;
            高さ:600px;
            マージン:自動;
            border:1px 濃い青の実線;
        }
        .totle {
            幅:100%;
            高さ:40px;
            ディスプレイ: フレックス;
            flex-direction: 行;
            フレックス：1;
            背景: #b0ffd8;
            テキスト配置: 中央;
            色: #5c5a5c;
            フォントサイズ: 18px;
            行の高さ: 40px;
        }
        .tot_1 {
            フレックス: 1;
        }
        .tot_2{
            フレックス:2.5;
        }
        。リスト{
            幅:1200ピクセル;
            高さ:自動;
        }
        .ページリスト{
            幅:100%;
            高さ:35px;
            border-bottom: 1px ソリッドシルバー;
            ディスプレイ: フレックス;
            flex-direction: 行;
            テキスト配置: 中央;
        }
        .perchild:n番目の子(1) {
            フレックス：1;
        }
        .perchild:n番目の子(2) {
            フレックス：1;
        }
        .perchild:n番目の子(3) {
            フレックス：1;
        }
        .perchild:n番目の子(4) {
            フレックス：1;
        }
        .perchild:n番目の子(5) {
            フレックス：1;
        }
        .perchild:n番目の子(6) {
            フレックス：1;
        }
        .perchild:n番目の子(7) {
            フレックス：1;
        }
        .perchild:n番目の子(8) {
            フレックス:2.5;
            背景: ピンク;
        }
        .フッター{
            位置: 絶対;
            下:5px;
            左:10px;
        }
        #pageshu>li{
            幅:35px;
            高さ:35px;
            行の高さ: 35px;
            表示: インラインブロック;
            テキスト配置: 中央;
            border:1px グレーの実線;
        }

        #戻る、#行く{
            幅:60ピクセル;
            高さ:35px;
            行の高さ: 35px;
            border:1px 黒一色;
            表示: インラインブロック;
            テキスト配置: 中央;
        }
        #foot_li>li:n番目の子(2)、#foot_li>li:n番目の子(4)、#foot_li>li:n番目の子(5)、#foot_li>li:n番目の子(6){
            表示: インラインブロック;
        }
        #foot_li>li:nth-child(4)>入力{
            幅:30px;
            高さ:20px;
            アウトライン: なし;
        }
        #foot_li>li:nth-child(5)>ボタン{
            背景: #000bff;
            色: #fff;
        }
    </スタイル>
</head>
<本文>
<div class="block">
    <div class="totle">
        <div class="tot_1">学生証</div>
        <div class="tot_1">名前</div>
        <div class="tot_1">性別</div>
        <div class="tot_1">年齢</div>
        <div class="tot_1">クラス</div>
        <div class="tot_1">趣味</div>
        <div class="tot_1">クレジット</div>
        <div class="tot_2">自宅住所</div>
    </div>
    <div class="list">

    </div>
    <div class="footer">
        <ul id="foot_li">
            <li id="back">前のページ</li>
            <li>
                <ul id="pageshu">

                </ul>
            </li>
            <li id="go">次のページ</li>
            <li><input id="in_put" type="text"/> にジャンプ</li>
            <li><button id="tiao">ジャンプ</button></li>
            <li>総ページ数:<span id="tot"></span></li>
        </ul>

    </div>
</div>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: