//分页函数
function page(opt){
if(!opt.id){
return false;
}
var pageContainer=document.getElementById(opt.id); //分页最外部的容器
var nowPage=opt.nowPage || 1; //当前处于第几页
var pageSize=opt.pageSize || 15; //每页的基数
var countPage=Math.ceil(opt.countItem/pageSize); //计算总共有多少分页
var callback=opt.callback || function(){}; //回调
var pageHtml='<span class="page-item-count">共'+countPage+'页</span>';
//控制器函数,生成一些特定的公共部分
var controllerTab={
prev:function(){
if(nowPage==1){
pageHtml+='<a href="#'+(nowPage-1)+'" class="prev off">上一页</a>';
}else{
pageHtml+='<a href="#'+(nowPage-1)+'" class="prev">上一页</a>';
}
},
addCurrent:function(){
if(nowPage==i){
pageHtml+='<a href="#'+i+'" class="current">'+i+'</a>';
}else{
pageHtml+='<a href="#'+i+'">'+i+'</a>';
}
},
next:function(){
if(nowPage==countPage){
pageHtml+='<a href="#'+(nowPage+1)+'" class="next off">下一页</a>';
}else{
pageHtml+='<a href="#'+(nowPage+1)+'" class="next">下一页</a>';
}
},
createLast:function(){
pageHtml+='<span class="omit">...</span>';
pageHtml+='<a href="#'+(countPage-1)+'">'+(countPage-1)+'</a>';
pageHtml+='<a href="#'+countPage+'">'+countPage+'</a>';
}
}
if(countPage<=10){
controllerTab.prev();
for(var i=1; i<=countPage; i++){
for(var i=1; i<=countPage; i++){
controllerTab.addCurrent();
}
}
controllerTab.next();
pageContainer.innerHTML=pageHtml;
}else{
if(nowPage<=5){
controllerTab.prev();
for(var i=1; i<=nowPage+2; i++){
controllerTab.addCurrent();
}
controllerTab.createLast();
controllerTab.next();
pageContainer.innerHTML=pageHtml;
}else if(nowPage==6){
controllerTab.prev();
for(var i=1; i<=nowPage+2; i++){
if(i==3){
continue;
}
controllerTab.addCurrent();
}
controllerTab.createLast();
controllerTab.next();
pageContainer.innerHTML=pageHtml;
}else if(nowPage<=countPage-5){
controllerTab.prev();
pageHtml+='<a href="#1">1</a>';
pageHtml+='<a href="#2">2</a>';
pageHtml+='<span class="omit">...</span>';
for(var i=nowPage-2; i<=nowPage+2; i++){
controllerTab.addCurrent();
}
controllerTab.createLast();
controllerTab.next();
pageContainer.innerHTML=pageHtml;
}else{
controllerTab.prev();
pageHtml+='<a href="#1">1</a>';
pageHtml+='<a href="#2">2</a>';
pageHtml+='<span class="omit">...</span>';
for(var i=nowPage-2; i<=countPage; i++){
controllerTab.addCurrent();
}
controllerTab.next();
pageContainer.innerHTML=pageHtml;
}
}
callback(nowPage,countPage);
var aA=pageContainer.querySelectorAll('a');
for(j=0; j<aA.length; j++){
aA[j].onclick=function(){
var nowNum=parseInt(this.getAttribute('href').substring(1));
if(nowNum && nowNum<countPage+1){
pageContainer.innerHTML='';
page({
id:'page-container',
nowPage:nowNum,
countItem:opt.countItem,
pageSize:pageSize,
callback:callback
});
}
return false; //阻止默认事件,这样a标签href中的#就不会追加到地址栏后边了
}
}
}
//分页函数 end
var oConsole=document.getElementById('console-info'); //演示打印信息
//调用分页函数,根据配置参数生成分页
page({
id:'page-container',
nowPage:1, //默认当前页
countItem:392, //总共有多少项
pageSize:15, //每页的基数
callback:function(now,count){
//实际开发中,在这里可以用ajax更新分页数据...
oConsole.innerHTML='当前页:'+now+' 总共页:'+count;
}
});
javaScript翻页功能
猜你喜欢
转载自blog.csdn.net/supercaojh/article/details/78361000
今日推荐
周排行