面向对象版js分页

基于前一个js分页，我将代码改成一个面向对象版的js分页，代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
a{
    margin: 5px;
}
</style>
<title>分页</title>    
<script type="text/javascript">
window.onload=function(){
    new page(
        {id:'div1',
        nowNum:8,
        allNum:10,
        callback:function(now,all){
            alert('当前页：'+now+','+'总共'+all+'页')
        }
        }
    )
}

function page(json){
    this.json=json;

    if(!this.json.id){
        return false
    }
    this.obj=null;
    this.nowNum=null;
    this.allNum=null;
    this.callback=null;

    var _this=this;
    this.obj=document.getElementById(this.json.id);
    this.nowNum=this.json.nowNum||1;
    this.allNum=this.json.allNum||5;
    this.callback=this.json.callback||function(){};

    if(this.nowNum >3 && this.allNum >5){
        var oA=null;

        this.oA=document.createElement('a');
        this.oA.href="#"+1;
        this.oA.innerHTML="首页";
        this.obj.appendChild(this.oA)
    }
    if(this.nowNum>1){
        var oA=null;

        this.oA=document.createElement('a');
        this.oA.href="#"+(this.nowNum-1);
        this.oA.innerHTML="上一页";
        this.obj.appendChild(this.oA)
    }



    if(this.allNum<=5){
        for(var i=0;i<this.allNum;i++){
            var oA=null;
            this.oA=document.createElement('a');

            this.oA.href='#'+(i+1);

            if(this.nowNum==i){
                this.oA.innerHTML=(i+1);
            }else{
                this.oA.innerHTML='['+ (i+1) +']';
            }
            this.obj.appendChild(this.oA);

        }
    }else{

        for(var i=1;i<=5;i++){
            var oA=null;
            this.oA=document.createElement('a');

            if(this.nowNum==1||this.nowNum==2){
                this.oA.href='#'+i;
                this.oA.innerHTML='['+i+']';

                if(this.nowNum==i){
                    this.oA.innerHTML=i
                }
            }else if((this.allNum - this.nowNum) == 0||(this.allNum - this.nowNum == 1)){
        
                this.oA.href='#'+(this.allNum-5+i);
                if(this.allNum - this.nowNum==0 && i==5){
                    this.oA.innerHTML=(this.allNum-5+i);
                }else if(this.allNum - this.nowNum==1 && i==4){
                    this.oA.innerHTML=(this.allNum-5+i);
                }else{
                    this.oA.innerHTML='['+(this.allNum-5+i)+']';
                }

        
            }else{
                this.oA.href = '#' + (this.nowNum - 3 + i);

                if(i==3){
                    this.oA.innerHTML=(this.nowNum-3+i);
                }else{
                    this.oA.innerHTML='['+(this.nowNum-3+i)+']';
                }

            }
            this.obj.appendChild(this.oA);

        }
    }

    if((this.allNum - this.nowNum) > 0){
        var oA=null;
        this.oA=document.createElement('a');
        this.oA.href='#'+(this.nowNum+1);
        this.oA.innerHTML = '下一页';    
        this.obj.appendChild(this.oA);
    }
    if((this.allNum - this.nowNum)>2){
        var oA=null;
        this.oA=document.createElement('a');
        this.oA.href='#'+this.allNum;
        this.oA.innerHTML = '尾页'    
        this.obj.appendChild(this.oA);
    }
    this.callback(this.nowNum,this.allNum);

    

    var aA=null;

    this.aA=this.obj.getElementsByTagName('a');
    for(var i=0;i<this.aA.length;i++){

        var _this=this;

        this.aA[i].onclick=function(){
            _this.change(this);
        };
        
    }
}
page.prototype.change=function(btn){

            var nowNum=null;
            

            this.nowNum = parseInt(btn.getAttribute('href').substring(1));
            
            this.obj.innerHTML='';

            new page(
                {
                    id:    this.json.id,
                    nowNum:this.nowNum,
                    allNum:this.allNum
                }
            )
}
</script>
</head>
<body>
<div id="div1">
    <!-- <a href="#1">1</a>
    <a href="#1">2</a>
    <a href="#1">3</a>
    <a href="#1">4</a>
    <a href="#1">5</a> -->
</div>
</body>
</html>

 

posted @ 2016-08-10 10:39  小全栈  阅读(319)  评论(0)  编辑  收藏  举报