復制代碼 代碼如下:
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='#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{
//倒數第一頁的處理
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');
//給頁碼添加點擊事件
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.jb51.net/js/2012/js_page/