原生javascript实现分页效果
随着近几年前端行业的迅猛发展，各种层出不穷的新框架，新方法让我们有点眼花缭乱。
最近刚好比较清闲，所以没事准备撸撸前端的根基javascript,纯属练练手，写个分页，顺便跟大家分享一下
functionpageFunc(conf){
this.myFunc=conf.click//用户点击要执行的方法
this.total=conf.total;//总页数
this.currentPage=1;//当前页码
this.init()//初始化
}
pageFunc.prototype.init=function(){
vartotal=this.total,
currentPage=this.currentPage,
_this=this;
listeners={
'setWhat':function(opts){
_this.aClick(opts.src)
returnfalse;
}
};
listenersPre={
'lmw-pre':function(opts){
_this.prevClick()
returnfalse;
}
};
listenersAdd={
'lmw-add':function(opts){
_this.addClick()
returnfalse;
}
};
varrootele=this.createPage(1,total);
document.getElementById('page-coat').innerHTML=rootele
$on(document.getElementById('page-coat'),['click'],listeners);//点击a标签
$on(document.getElementById('page-coat'),['click'],listenersPre);//点击上一页
$on(document.getElementById('page-coat'),['click'],listenersAdd);//点击下一页
}
//创建HTML分页结构字符串
pageFunc.prototype.createPage=function(page,total){
varstr=`${page}`
for(vari=1;i<=3;i++){
if(page-i>1){
str=`${page-i}`+str
}
if(page+i${(page+i)}`
}
};
if(page-4>1){
str='...'+str
};
if(page+4...'
};
if(page>1){
str=`上一页1`+str
};
if(page${total}下一页`
};
returnstr
}
//上一页方法
pageFunc.prototype.prevClick=function(){
vartotal=this.total
varva=--this.currentPage
varnewret=this.createPage(va,total)
document.getElementById('page-coat').innerHTML=newret
this.myFunc(va)
}
//下一页方法
pageFunc.prototype.addClick=function(){
vartotal=this.total
varva=++this.currentPage
varnewret=this.createPage(va,total)
document.getElementById('page-coat').innerHTML=newret
this.myFunc(va)
};
//点击方法
pageFunc.prototype.aClick=function(_this){
vartotal=this.total
varva=parseInt(_this.innerText);
this.currentPage=va
varrootele=this.createPage(va,total)
document.getElementById('page-coat').innerHTML=rootele
this.myFunc(va)
};
//二：封装事件代理方法
function$on(dom,event,listeners){
$addEvent(dom,event,function(e){
vare=e||window.event,
src=e.target||e.srcElement,
action,
returnVal;
while(src&&src!==dom){
action=src.getAttribute('attr-action')||src.getAttribute('class');
if(listeners[action]){
returnVal=listeners[action]({
src:src,
e:e,
action:action
});
if(returnVal===false){
break;
}
}
src=src.parentNode;
}
});
};
//1、封装跨浏览器事件绑定方法
function$addEvent(obj,type,handle){
if(!obj||!type||!handle){
return;
}
if(objinstanceofArray){
for(vari=0,l=obj.length;i
使用方法：
分页效果
#page-coata{
text-decoration:none;
display:inline;
float:left;
padding:3px10px3px10px;
overflow:hidden;
border:1pxsolid#ccc;
color:#999;
margin-right:5px;
cursor:pointer;
background:#fff;
}
#page-coata:hover{
border:1pxsolid#FF6600;
background-color:#FF6600;
color:#fff;
}
#page-coatspan{
display:inline;
float:left;
color:#999;
background:#fff;
}
#page-coata.lmw-current{
color:#FF6600;
border:1pxsolid#FF6600;
background-color:#FFEEE5;
}