原生js编写基于面向对象的分页组件

时间：2021-05-25

本文实例为大家分享了一个基于面向对象的分页组件的具体实现代码，供大家参考，具体内容如下

文字表达有限，直接上代码了

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一个基于面向对象的分页组件</title> <style> html,body{padding:0;margin:0;} p{padding:0;margin:0;} a{text-decoration: none} .Paging{overflow: hidden;} .Paging-item{float: left;padding: 10px 15px;background: #4caf50;color: #fff;margin-left: 5px;} .Paging-item-active{background: #ff568e;} </style> </head> <body> <div id="page"></div> </body> <script> //分页组件类 function Paging(container,opt){ //自定义事件 this.eventHandlers={}; //默认设置 this.config={ nowNum: 1, allNum: 10, callback: function(){} } if(opt){ this.extend(this.config,opt); } //外层容器 this.Box= null; //渲染组件 this.render(container); } Paging.prototype={ constructor: Paging, on: function(eventType,eventHandler){ if(typeof this.eventHandlers[eventType] === 'undefined'){ this.eventHandlers[eventType]= []; } this.eventHandlers[eventType].push(eventHandler); }, fire: function(eventType){ if( this.eventHandlers[eventType] instanceof Array){ var len= this.eventHandlers[eventType].length; for(var i=0;i<len;i++){ this.eventHandlers[eventType][i](); } } }, renderUI: function(){ this.Box= document.createElement('div'); this.Box.className= 'Paging'; var nowNum= this.config.nowNum; var allNum= this.config.allNum; //当前页大于或等于4，第一页才能隐藏，总数大于5才能显示首页 if (nowNum >=4 && allNum >=6) { var pageA= document.createElement('a'); pageA.className= 'Paging-item Paging-item-start' pageA.href='#1'; pageA.innerHTML= '首页'; this.Box.appendChild(pageA); }; //当前页只要不是第一页就显示上一页 if(nowNum>=2){ var pageA= document.createElement('a'); pageA.className= 'Paging-item Paging-item-pre' pageA.href='#'+ (nowNum-1); pageA.innerHTML= '上一页'; this.Box.appendChild(pageA); } //只有5页时 if(allNum<=5){ for(var i=1;i<=allNum;i++){ var pageA= document.createElement('a'); pageA.className= 'Paging-item' pageA.href= '#'+ i; if(nowNum==i){ pageA.className= 'Paging-item Paging-item-active' pageA.innerHTML=i; }else{ // pageA.innerHTML='['+ i +']'; pageA.innerHTML=i; } this.Box.appendChild(pageA); } }else{ for(var i=1;i<=5;i++){ var pageA= document.createElement('a'); pageA.className= 'Paging-item' pageA.href= '#'+ (nowNum-3+i); //对当前页为前2页的处理 if(nowNum === 1 || nowNum === 2){ pageA.href= '#'+ i; if(nowNum === i){ pageA.className= 'Paging-item Paging-item-active' pageA.innerHTML= i; }else{ // pageA.innerHTML= '['+i+']'; pageA.innerHTML= i; } }else if((allNum-nowNum) ===0 || (allNum-nowNum) === 1){ pageA.href= '#'+ ((allNum-5)+i); if((allNum-nowNum) ===0 && i===5){ pageA.className= 'Paging-item Paging-item-active' pageA.innerHTML=((allNum-5)+i); }else if((allNum-nowNum) ===1 && i===4){ pageA.className= 'Paging-item Paging-item-active' pageA.innerHTML=((allNum-5)+i); }else{ // pageA.innerHTML= '['+ ((allNum-5)+i) +']' pageA.innerHTML= ((allNum-5)+i) } }else{ if(nowNum === (nowNum-3+i)){ pageA.className= 'Paging-item Paging-item-active' pageA.innerHTML= (nowNum-3+i); }else{ // pageA.innerHTML= '['+ (nowNum-3+i) +']' pageA.innerHTML= (nowNum-3+i) } } this.Box.appendChild(pageA); } } if((allNum-nowNum) >=1){ var pageA= document.createElement('a'); pageA.className= 'Paging-item Paging-item-next' pageA.href='#'+ (nowNum+1); pageA.innerHTML= '下一页'; this.Box.appendChild(pageA); } //选择7为标准，或7以下才能显示 if((allNum-nowNum) >= 3 && allNum >= 6){ var pageA= document.createElement('a'); pageA.className= 'Paging-item Paging-item-end' pageA.href='#'+allNum; pageA.innerHTML= '尾页'; this.Box.appendChild(pageA); } }, bindUI: function(){ var self= this; this.config.callback(this.config.nowNum,this.config.allNum); //利用事件委托 self.Box.onclick= function(e){ var e= e || window.event; var target= e.target || e.srcElement; if(typeof e.target.getAttribute('href') === 'string'){ var nowNum= parseInt(target.getAttribute('href').substring(1)); // console.log(nowNum); self.Box.innerHTML= ''; new Paging(null,{ nowNum: nowNum, allNum: self.config.allNum, callback: self.config.callback }) } return false; } }, render: function(container){ this.renderUI(); this.bindUI(); if(container){ var con= document.getElementById(container); con.appendChild(this.Box); }else{ document.body.appendChild(this.Box); } }, extend: function(obj1,obj2){ for(attr in obj2){ obj1[attr]= obj2[attr]; } } } //初始化调用 var page= new Paging(null,{ nowNum: 1, allNum: 10, callback: function(nowNum,allNum){ console.log('当前页：'+nowNum) console.log('总页：'+allNum) } }); </script> </html>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章