javascript分页代码(当前页码居中)

答案：
复制代码 代码如下:
 
function setPage(opt){ 
if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum){return false}; 
var allPageNum = opt.allPageNum; //总的页数 
var showPageNum = opt.showPageNum; //显示的页数 
var curpageNum = opt.curpageNum; // 当前的页数 
var pageDIvBox = document.getElementById(opt.pageDivId); 
//左边或右边显示页码的个数 
var lrNum = Math.floor(showPageNum/2); 
if(curpageNum>1){ 
var oA = document.createElement('a'); 
oA.href=>oA.innerHTML = '首页' 
pageDIvBox.appendChild(oA); 
} 
if(curpageNum>1){ 
var oA = document.createElement('a'); 
oA.href=>oA.innerHTML = '上一页' 
pageDIvBox.appendChild(oA); 
} 
if(curpageNum<showPageNum-2 || allPageNum == showPageNum){ 
for(var i=1;i<=showPageNum;i++){ 
var oA = document.createElement('a'); 
oA.href = '#'+i; 
if(curpageNum==i){ 
oA.innerHTML = i; 
}else{ 
oA.innerHTML = "[" + i + "]"; 
} 
pageDIvBox.appendChild(oA); 
} 
}else{ 
//倒数第一页的处理 
if(allPageNum-curpageNum<lrNum && curpageNum == allPageNum-1){ 
for(var i=1;i<=showPageNum;i++){ 
console.log((curpageNum - showPageNum + i)); 
var oA = document.createElement('a'); 
oA.href = '#'+ (curpageNum - (showPageNum-1) + i); 
if(curpageNum == (curpageNum - (showPageNum-1) + i)){ 
oA.innerHTML = (curpageNum - (showPageNum-1) + i) 
}else{ 
oA.innerHTML = '['+(curpageNum - (showPageNum-1) + i)+']' 
} 
pageDIvBox.appendChild(oA); 
} 
} 
//最后一页的处理 
else if(allPageNum-curpageNum<lrNum && curpageNum == allPageNum){ 
for(var i=1;i<=showPageNum;i++){ 
console.log((curpageNum - showPageNum + i)); 
var oA = document.createElement('a'); 
oA.href = '#'+ (curpageNum - showPageNum + i); 
if(curpageNum == (curpageNum - showPageNum + i)){ 
oA.innerHTML = (curpageNum - showPageNum + i) 
}else{ 
oA.innerHTML = '['+(curpageNum-showPageNum + i)+']' 
} 
pageDIvBox.appendChild(oA); 
} 
}else{ 
for(var i=1;i<=showPageNum;i++){ 
var oA = document.createElement('a'); 
oA.href = '#'+ (curpageNum - (showPageNum-lrNum) + i); 
if(curpageNum == (curpageNum - (showPageNum-lrNum) + i)){ 
oA.innerHTML = (curpageNum - (showPageNum-lrNum) + i) 
}else{ 
oA.innerHTML = '['+(curpageNum - (showPageNum-lrNum) + i)+']' 
} 
pageDIvBox.appendChild(oA); 
} 
} 
} 
if(curpageNum<allPageNum){ 
for(var i=1;i<=2;i++){ 
if(i==1){ 
var oA = document.createElement('a'); 
oA.href=>oA.innerHTML = '下一页' 
}else{ 
var oA = document.createElement('a'); 
oA.href=>oA.innerHTML = '尾页' 
} 
pageDIvBox.appendChild(oA); 
} 
} 
var oA = document.getElementsByTagName('a'); 
//给页码添加点击事件 
for(var i=0;i<oA.length;i++){ 
oA[i].onclick = function(){ 
//当前点的页码 
var sHref = this.getAttribute('href').substring(1); 
//清空页数显示 
pageDIvBox.innerHTML = ''; 
setPage({ 
pageDivId:'page', 
showPageNum:5, //显示的个数 
allPageNum:10, //总页数 
curpageNum:sHref //当前页数 
}) 
} 
} 
} 
window.onload = function(){ 
setPage({ 
pageDivId:'page', 
showPageNum:5, //显示的个数 
allPageNum:10, //总页数 
curpageNum:1 //当前页数 
}) 
} 
 
昨天看了妙味课堂的 分页视频教程，今天自己参照其思路，自己写了下，并且自己新增了一个‘显示页码个数'的属性 ‘showPageNum'; 

下面对关键的几个地方做个总结： 

1.点击的当前页码需要在显示的页码中居中; 
无论是显示 3页 5页 7页 9页…… 等等 
当前页要居中，可以推出一个公式 
用显的页码个数除以2 再取整，就可以得到左右需要显的页码个数。这个对后面的分页判断很有用 
var lrNum = Math.floor(showPageNum/2); 

2.获取页码 
this.getAttribute('href') 用它可以得到相对路径;this.href 用它只能得到绝对路径

DEMO在线演示 http://demo.zzzyk.com/js/2012/js_page/

上一个：JavaScript 用Node.js写Shell脚本[译]
下一个：一个简单的网站访问JS计数器 刷新1次加1次访问