原生js+ajax分页组件
本文实例为大家分享了js+ajax分页组件的具体代码，供大家参考，具体内容如下
1.定义分页组件DOM
2.定义分页组件类及实例方法：
//分页组件类
functionPagination(_ref){
this.id=_ref.id;//分页组件挂载的DOM节点
this.curPage=_ref.curPage||1;//初始页码
this.draw=_ref.draw;//初始化分页请求次数
this.pageSize=_ref.pageSize||5;//分页个数
this.pageLength=_ref.pageLength;//每页多少条
this.pageTotal=0;//总共多少页
this.dataTotal=0;//总共多少数据
this.ajaxParam=_ref.ajaxParam;//分页ajax
this.showPageTotalFlag=_ref.showPageTotalFlag||false;//是否显示数据统计
this.showSkipInputFlag=_ref.showSkipInputFlag||false;//是否支持跳转
this.ul=document.createElement('ul');
this.init();
};
//给实例对象添加公共属性和方法
Pagination.prototype={
init:function(){
varpagination=document.getElementById(this.id);
pagination.innerHTML='';
this.ul.innerHTML='';
pagination.appendChild(this.ul);
var_this=this;
_this.getPage(_this.curPage)
.then(function(data){
//首页
_this.firstPage();
//上一页
_this.lastPage();
//分页
_this.getPages().forEach(function(item){
varli=document.createElement('li');
if(item==_this.curPage){
li.className='active';
}else{
li.onclick=function(){
_this.curPage=parseInt(this.innerHTML);
_this.init();
};
}
li.innerHTML=item;
_this.ul.appendChild(li);
});
//下一页
_this.nextPage();
//尾页
_this.finalPage();
//是否支持跳转
if(_this.showSkipInputFlag){
_this.showSkipInput();
}
//是否显示总页数,每页个数,数据
if(_this.showPageTotalFlag){
_this.showPageTotal();
}
})
},
//分页数据请求
getPage:function(curPage){
var_this=this;
_this.draw++;
returnnewPromise(function(resolve,reh){
$.ajax({
url:_this.ajaxParam.url,
type:_this.ajaxParam.type,
dataType:"json",
data:{
curPage:curPage,
pageLength:10,
draw:_this.draw
},
success:function(data){
if(data.isSuccess===true){
vardata=data;
_this.pageTotal=Math.ceil(parseFloat(data.data.totalResult/_this.pageLength)),
_this.dataTotal=data.data.totalResult,
_this.draw=data.data.draw;
resolve(data)
}else{
reject("请求错误")
}
},
error:function(err){
reject(err)
}
})
})
},
//首页
firstPage:function(){
var_this=this;
varli=document.createElement('li');
li.innerHTML='首页';
this.ul.appendChild(li);
li.onclick=function(){
varval=parseInt(1);
_this.curPage=val;
_this.init();
};
},
//上一页
lastPage:function(){
var_this=this;
varli=document.createElement('li');
li.innerHTML='<';
if(parseInt(_this.curPage)>1){
li.onclick=function(){
_this.curPage=parseInt(_this.curPage)-1;
_this.init();
};
}else{
li.className='disabled';
}
this.ul.appendChild(li);
},
//分页
getPages:function(){
varpag=[];
if(this.curPage<=this.pageTotal){
if(this.curPagethis.pageTotal-this.pageSize){
middle=this.pageTotal-this.pageSize+1;
}
while(i--){
pag.push(middle++);
}
}
}else{
console.error('当前页数不能大于总页数');
}
if(!this.pageSize){
console.error('显示页数不能为空或者0');
}
returnpag;
},
//下一页
nextPage:function(){
var_this=this;
varli=document.createElement('li');
li.innerHTML='>';
if(parseInt(_this.curPage)0){
_this.curPage=val;
}else{
alert("请输入正确的页数!")
}
_this.init();
}
};
li.appendChild(input);
varspan2=document.createElement('span');
span2.innerHTML='页';
li.appendChild(span2);
this.ul.appendChild(li);
},
//是否显示总页数,每页个数,数据
showPageTotal:function(){
var_this=this;
varli=document.createElement('li');
li.innerHTML='共 '+_this.pageTotal+' 页';
li.className='totalPage';
this.ul.appendChild(li);
varli2=document.createElement('li');
li2.innerHTML='每页 '+_this.pageLength+' 条';
li2.className='totalPage';
this.ul.appendChild(li2);
varli3=document.createElement('li');
li3.innerHTML='共 '+_this.dataTotal+' 条数据';
li3.className='totalPage';
this.ul.appendChild(li3);
varli4=document.createElement('li');
li4.innerHTML=_this.curPage+"/"+_this.pageTotal;
li4.className='totalPage';
this.ul.appendChild(li4);
}
};
3.实例化分页组件
letpageInstance=newPagination({
id:'pagination',
curPage:1,//初始页码,不填默认为1
draw:0,//当前渲染次数统计
pageLength:10,//每页多少条
pageSize:5,//分页个数,不填默认为5
showPageTotalFlag:true,//是否显示数据统计,不填默认不显示
showSkipInputFlag:true,//是否支持跳转,不填默认不显示
ajaxParam:{//分页ajax
url:'https://www.easy-mock.com/mock/5cc6fb7358e3d93eff3d812c/page',
type:"get",
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。