快捷導(dǎo)航

js對象實現(xiàn)數(shù)據(jù)分頁效果

更新時間：2021年09月17日 10:23:34 作者：fanfan_h

這篇文章主要為大家詳細(xì)介紹了js對象實現(xiàn)數(shù)據(jù)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js對象實現(xiàn)數(shù)據(jù)分頁效果的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)數(shù)據(jù)分頁要清楚這個的方面的設(shè)計：

1.先模擬建立一個后臺數(shù)據(jù)庫，如下：

var peoson=[
    {
    "id":"1",
        " name":"鞠婧祎",
        "sex":"女",
        "age":"25",
        "class":"八班",
        "habby":"跳舞",
        "score":"40",
        "addess":"陜西西安長安區(qū)"
},
{
    "id":"2",
    " name":"關(guān)曉彤",
    "sex":"女",
    "age":"20",
    "class":"八班",
    "habby":"跳舞",
    "score":"40",
    "addess":"陜西西安長安區(qū)"
},
{
    "id":"3",
    " name":"趙麗穎",
    "sex":"女",
    "age":"26",
    "class":"八班",
    "habby":"跳舞",
    "score":"40",
    "addess":"陜西西安長安區(qū)"
},
{
    "id":"4",
    " name":"薛之謙",
    "sex":"男",
    "age":"37",
    "class":"八班",
    "habby":"跳舞",
    "score":"40",
    "addess":"陜西西安長安區(qū)"
}
]

2.設(shè)置每頁的數(shù)據(jù)量，當(dāng)前頁數(shù)以及總頁數(shù)

用函數(shù)動態(tài)設(shè)置總頁數(shù)，根據(jù)總的數(shù)據(jù)量除以每頁數(shù)據(jù)量來計算；
用函數(shù)動態(tài)設(shè)置每頁里的數(shù)據(jù)是由總數(shù)據(jù)中的哪幾條；

Allpage: function () {
            this.allpage = Math.ceil(this.Message.length / this.perpage);
            console.log(this.Message.length);
            console.log(this.allpage);
        },
        Nowpagenum:function(n){
            var first=(n-1)*this.perpage;  //0
            var last=n*this.perpage ;  //10
            this.nowpagenum =this.Message.slice(first,last);
        },

3.動態(tài)創(chuàng)建dom元素，給最大塊添加子元素，用來存放每一條數(shù)據(jù)

Creatnews:function() {
            this.list.innerHTML = "";
            for (var i = 0; i < this.perpage; i++) {
                var page_list = document.createElement("div");
                page_list.className = "pagelist";
                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.創(chuàng)建列表下面的頁數(shù)，進(jìn)行前縮進(jìn)，后縮進(jìn)和前后縮進(jìn)

假設(shè)總頁數(shù)為
如果當(dāng)前頁數(shù)大于5頁會進(jìn)行前縮進(jìn)，前面的頁數(shù)從2到當(dāng)前頁數(shù)減一的頁數(shù)縮進(jìn)；
如果當(dāng)前頁數(shù)小于16時都會進(jìn)行后縮進(jìn)
介于兩者之間的頁數(shù)會進(jìn)行前后縮進(jìn)。

Page_ma:function(current,totle){
            var str="";
            for(var i=1;i <=totle;i++){
               if(i==2 && current-3>i ){ //ǰ����  current>5
                   i=current-1;
                   str+="<li>...</li>";
               }
               else if(i==current+4 && current+4<totle){
                   i=totle-1;
                   str+="<li>...</li>"; //������  current<16

               }
               else{
                   if(current==i){
                   str+="<li class='minilist' style='background: pink'>"+i+"</li>"   ;
                   }
                   else{
                       str+="<li class='minilist'>"+i+"</li>";

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

5.點擊頁數(shù)時，會跳轉(zhuǎn)到當(dāng)前頁數(shù)的數(shù)據(jù)，并進(jìn)行相應(yīng)的縮進(jìn)

Pageclick:function(){
            var mini_list=document.getElementsByClassName ("minilist");
            for(var k=0;k <mini_list.length;k++){
               mini_list[k].onclick=function(){
                  Fenye.nowpage=parseInt (this.innerHTML  );
                 // console.log(this.innerHTML);  //mini_list[k] ������ı�
                  Fenye.Page_ma(Fenye.nowpage,Fenye.allpage);
                  Fenye.Pageclick();
                  Fenye.Creatnews ();
                  Fenye.Nowpagenum (Fenye.nowpage);

               }

6.點擊上下頁，以及設(shè)置跳轉(zhuǎn)的頁數(shù)時，會跳轉(zhuǎn)到當(dāng)前頁數(shù)的數(shù)據(jù)，并進(jìn)行相應(yīng)的縮進(jìn)

Clickevent:function(){

            Fenye. back.onclick =function(){
                Fenye.nowpage--;
                if(Fenye.nowpage<2){
                    Fenye.nowpage=1;
                }
                Fenye.Page_ma(Fenye.nowpage,Fenye.allpage);
                Fenye.Pageclick();
                Fenye.Creatnews ();
                Fenye.Nowpagenum (Fenye.nowpage);

            };
            Fenye.go.onclick =function(){

                if(Fenye.nowpage>=Fenye.allpage){
                    Fenye.nowpage=Fenye.allpage;
                }
                Fenye.nowpage++;
                Fenye.Page_ma(Fenye.nowpage,Fenye.allpage);
                Fenye.Pageclick();
                Fenye.Creatnews ();
                Fenye.Nowpagenum (Fenye.nowpage);
            };
            Fenye.tiao.onclick =function(){
               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.Creatnews ();
                Fenye.Nowpagenum (Fenye.nowpage);
            }

        }

html和css部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/message1.js " type="text/javascript "></script>
    <script src="js/pagenews.js " type="text/javascript "></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        li{
            list-style: none;
        }
        .block{
            position: relative;
            width:1200px;
            height:600px;
            margin:auto;
            border:1px solid darkblue;
        }
        .totle {
            width:100%;
            height:40px;
            display: flex;
            flex-direction: row;
            flex:1;
            background: #b0ffd8;
            text-align: center;
            color: #5c5a5c;
            font-size: 18px;
            line-height: 40px;
        }
        .tot_1 {
            flex: 1;
        }
        .tot_2{
            flex:2.5;
        }
        .list{
            width:1200px;
            height:auto;
        }
        .pagelist{
            width:100%;
            height:35px;
            border-bottom: 1px solid silver;
            display: flex;
            flex-direction: row;
            text-align: center;
        }
        .perchild:nth-child(1) {
            flex:1;
        }
        .perchild:nth-child(2) {
            flex:1;
        }
        .perchild:nth-child(3) {
            flex:1;
        }
        .perchild:nth-child(4) {
            flex:1;
        }
        .perchild:nth-child(5) {
            flex:1;
        }
        .perchild:nth-child(6) {
            flex:1;
        }
        .perchild:nth-child(7) {
            flex:1;
        }
        .perchild:nth-child(8) {
            flex:2.5;
            background: pink ;
        }
        .footer{
            position: absolute;
            bottom:5px;
            left:10px;
        }
        #pageshu> li{
            width:35px;
            height:35px;
            line-height: 35px;
            display: inline-block;
            text-align: center;
            border:1px solid gray;
        }

        #back, #go{
            width:60px;
            height:35px;
            line-height: 35px;
            border:1px solid black;
            display: inline-block;
            text-align: center;
        }
        #foot_li>li:nth-child(2), #foot_li>li:nth-child(4), #foot_li>li:nth-child(5),#foot_li>li:nth-child(6){
            display: inline-block;
        }
        #foot_li>li:nth-child(4)>input{
            width:30px;
            height:20px;
            outline: none;
        }
        #foot_li>li:nth-child(5)>button{
            background: #000bff;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="block">
    <div class="totle">
        <div class="tot_1">學(xué)號</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">學(xué)分</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>跳轉(zhuǎn)到<input id="in_put" type="text"/> </li>
            <li><button id="tiao">跳轉(zhuǎn)</button></li>
            <li>總頁數(shù):<span id="tot"></span></li>
        </ul>

    </div>
</div>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: