js分页

 js分页组件：面向对象，无依赖

和jq的分页逻辑几乎一样，写法上我感觉应该更高效一些，

 

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>oop 分页组件</title>
    <style>
    *{ margin:0; padding:0; list-style:none;}
    a{ text-decoration:none;}
    a:hover{ text-decoration:none;}
    h2{ text-align: center;}

    .tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;text-align:center;}
    .tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px;    line-height: 25px;    padding: 0 10px;border: 1px solid #ddd;    margin: 0 2px;border-radius: 4px;vertical-align: middle;}
    .tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;}
    .tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca;    border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}
    .tcdPageCode span.disabled{    display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;    color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}
    </style>
</head>

<body>
    <h2>原生js</h2>
    <div id="div2" class="tcdPageCode"></div>


    <script type="text/javascript">
        function Page(obj,ojson){
            if(obj){
                this.obj=obj
            }else{
                console.log('obj 错误！')
                return false;
            };
            this.data={
                pageCount:ojson.pageCount || false, //总页数
                current:ojson.current || false,        //当前页
                prevHTML:ojson.prevHTML || '上一页',
                nextHTML:ojson.nextHTML || '下一页',
                backFn:ojson.backFn || function(p){}//回调
            };
            this.init(this.data);
            this.Event()
        };

        Page.prototype.init=function(n){
            this.obj.innerHTML ="";
            //上一页
            if(n.current > 1){
                this.prev=document.createElement('a');
                this.next.href="javascript:;"
                this.prev.className='prevPage';
            }else{
                this.prev=document.createElement('span');
                this.prev.className='disabled';
            }
            this.prev.innerHTML=this.data.prevHTML;
            this.obj.appendChild(this.prev);
            
            //中间页码
            if(n.current != 1 && n.current >= 4 && n.pageCount != 4){
                this.obj.innerHTML += '<a index="'+1+'" href="javascript:;" class="tcdNumber">'+1+'</a>';
            }
            if(n.current-2 > 2 && n.current <= n.pageCount && n.pageCount > 5){
                this.obj.innerHTML += '<span>...</span>';
            }
            
            var start = n.current -2,end = n.current+2;
            if((start > 1 && n.current < 4)||n.current == 1){ end++; }
            if(n.current > n.pageCount-4 && n.current >= n.pageCount){ start--; }
            for (;start <= end; start++) {
                if(start <= n.pageCount && start >= 1){
                    if(start != n.current){
                        this.obj.innerHTML += '<a index="'+start+'" href="javascript:;" class="tcdNumber">'+ start +'</a>';
                    }else{
                        this.obj.innerHTML += '<span class="current">'+ start +'</span>';
                    }
                }
            }
            if(n.current + 2 < n.pageCount - 1 && n.current >= 1 && n.pageCount > 5){
                this.obj.innerHTML += '<span>...</span>';
            }
            if(n.current != n.pageCount && n.current < n.pageCount -2  && n.pageCount != 4){
                this.obj.innerHTML += '<a index="'+n.pageCount+'" href="javascript:;" class="tcdNumber">'+n.pageCount+'</a>';
            }

            //下一页
            if(n.current < this.data.pageCount){
                this.next=document.createElement('a');
                this.next.href="javascript:;"
                this.next.className='nextPage';
            }else{
                this.next=document.createElement('span');
                this.next.className='disabled';
            }
            this.next.innerHTML=this.data.nextHTML;
            this.obj.appendChild(this.next);
            
            n.backFn(n.current);
        };
        Page.prototype.Event=function(){
            var _this=this;
            this.obj.onclick=function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.className === 'tcdNumber'){
                    _this.data.current=Number(target.innerHTML)
                    _this.init(_this.data)
                }else if(target.className === 'prevPage'){
                    _this.data.current=_this.data.current-1
                    _this.init(_this.data)
                }else if(target.className === 'nextPage'){
                    _this.data.current=_this.data.current+1
                    _this.init(_this.data)
                }
            };
        }



        //应用 ================================================
        new Page( document.getElementById('div2'),
            {
                pageCount:16,
                current:1,
                backFn:function(p){
                    console.log("回调："+p);
                }
            }
        )
    </script>

</body>
</html>

 

posted on 2016-07-19 11:26  songyijian321  阅读(174)  评论(0)  编辑  收藏  举报

导航