js对象实现数据分页效果

Phoebe ·

更新时间:2024-11-10

· 325 次阅读

本文实例为大家分享了js对象实现数据分页效果的具体代码，供大家参考，具体内容如下

实现数据分页要清楚这个的方面的设计：

1.先模拟建立一个后台数据库，如下：


var peoson=[
    {
    "id":"1",
        " name":"鞠婧祎",
        "sex":"女",
        "age":"25",
        "class":"八班",
        "habby":"跳舞",
        "score":"40",
        "addess":"陕西西安长安区"
},
{
    "id":"2",
    " name":"关晓彤",
    "sex":"女",
    "age":"20",
    "class":"八班",
    "habby":"跳舞",
    "score":"40",
    "addess":"陕西西安长安区"
},
{
    "id":"3",
    " name":"赵丽颖",
    "sex":"女",
    "age":"26",
    "class":"八班",
    "habby":"跳舞",
    "score":"40",
    "addess":"陕西西安长安区"
},
{
    "id":"4",
    " name":"薛之谦",
    "sex":"男",
    "age":"37",
    "class":"八班",
    "habby":"跳舞",
    "score":"40",
    "addess":"陕西西安长安区"
}
]

2.设置每页的数据量，当前页数以及总页数

用函数动态设置总页数，根据总的数据量除以每页数据量来计算；
用函数动态设置每页里的数据是由总数据中的哪几条；


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.动态创建dom元素，给最大块添加子元素，用来存放每一条数据


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.创建列表下面的页数，进行前缩进，后缩进和前后缩进

假设总页数为
如果当前页数大于5页会进行前缩进，前面的页数从2到当前页数减一的页数缩进；
如果当前页数小于16时都会进行后缩进
介于两者之间的页数会进行前后缩进。


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.点击页数时，会跳转到当前页数的数据，并进行相应的缩进


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.点击上下页，以及设置跳转的页数时，会跳转到当前页数的数据，并进行相应的缩进


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">学号</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>
</body>
</html>

js对象数据 js 分页

1024 个赞