快捷導(dǎo)航

javascript分頁代碼(當(dāng)前頁碼居中)

更新時(shí)間：2012年09月20日 01:33:49 作者：

昨天看了妙味課堂的分頁視頻教程，今天自己參照其思路，自己寫了下，并且自己新增了一個(gè)顯示頁碼個(gè)數(shù)的屬性 showPageNum

 
function setPage(opt){ 
if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum){return false}; 
var allPageNum = opt.allPageNum; //總的頁數(shù) 
var showPageNum = opt.showPageNum; //顯示的頁數(shù) 
var curpageNum = opt.curpageNum; // 當(dāng)前的頁數(shù) 
var pageDIvBox = document.getElementById(opt.pageDivId); 
//左邊或右邊顯示頁碼的個(gè)數(shù) 
var lrNum = Math.floor(showPageNum/2); 
if(curpageNum>1){ 
var oA = document.createElement('a'); 
oA.href='#1'; 
oA.innerHTML = '首頁' 
pageDIvBox.appendChild(oA); 
} 
if(curpageNum>1){ 
var oA = document.createElement('a'); 
oA.href='#'+(curpageNum-1); 
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{ 
//倒數(shù)第一頁的處理 
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='#'+(parseInt(curpageNum)+1); 
oA.innerHTML = '下一頁' 
}else{ 
var oA = document.createElement('a'); 
oA.href='#'+allPageNum; 
oA.innerHTML = '尾頁' 
} 
pageDIvBox.appendChild(oA); 
} 
} 
var oA = document.getElementsByTagName('a'); 
//給頁碼添加點(diǎn)擊事件 
for(var i=0;i<oA.length;i++){ 
oA[i].onclick = function(){ 
//當(dāng)前點(diǎn)的頁碼 
var sHref = this.getAttribute('href').substring(1); 
//清空頁數(shù)顯示 
pageDIvBox.innerHTML = ''; 
setPage({ 
pageDivId:'page', 
showPageNum:5, //顯示的個(gè)數(shù) 
allPageNum:10, //總頁數(shù) 
curpageNum:sHref //當(dāng)前頁數(shù) 
}) 
} 
} 
} 
window.onload = function(){ 
setPage({ 
pageDivId:'page', 
showPageNum:5, //顯示的個(gè)數(shù) 
allPageNum:10, //總頁數(shù) 
curpageNum:1 //當(dāng)前頁數(shù) 
}) 
} 

昨天看了妙味課堂的分頁視頻教程，今天自己參照其思路，自己寫了下，并且自己新增了一個(gè)‘顯示頁碼個(gè)數(shù)'的屬性 ‘showPageNum';

下面對關(guān)鍵的幾個(gè)地方做個(gè)總結(jié)：

1.點(diǎn)擊的當(dāng)前頁碼需要在顯示的頁碼中居中;
無論是顯示 3頁 5頁 7頁 9頁…… 等等
當(dāng)前頁要居中，可以推出一個(gè)公式
用顯的頁碼個(gè)數(shù)除以2 再取整，就可以得到左右需要顯的頁碼個(gè)數(shù)。這個(gè)對后面的分頁判斷很有用
var lrNum = Math.floor(showPageNum/2);

2.獲取頁碼
this.getAttribute('href') 用它可以得到相對路徑;this.href 用它只能得到絕對路徑

DEMO在線演示 http://demo.jb51.net/js/2012/js_page/

您可能感興趣的文章: