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>