js对象实现数据分页效果

本文实例为大家分享了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+="
...
";
               }
               else if(i==current+4 && current+4"   ;
                   }
                   else{
                       str+="
"+i+"
";

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

5.点击页数时，会跳转到当前页数的数据，并进行相应的缩进

Pageclick:function(){
            var mini_list=document.getElementsByClassName ("minilist");
            for(var k=0;k  
 

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部分

    
    
    
    
    



    

        
学号
        
姓名
        
性别
        
年龄
        
班级
        
爱好
        
学分
        
家庭住址
    
    


    
    

        

            
上一页
            

                


                
            
            
下一页
            
跳转到 
            
跳转
            
总页数:
        

    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。