javascript分頁程式碼(目前頁碼居中)_javascript技巧

複製程式碼 程式碼如下:

function setPage(opt){
if(!opt.pageDiv || opt.allPageNum var allPageNum = opt.allPageNum; //總的頁數
varPageNum; //總的頁數
varPageNum; //總的頁數
varPageNum; //總的頁數
varPageNum; //總的頁數
varPageNum; //總的頁數
varPageNum; //顯示的頁數
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='#11 ';
oA.innerHTML = '首頁'
pageDIvBox.appendChild(oA);
}
if(curpageNum>1){
var oA = document.createElement('a') ;
oA.href='#' (curpageNum-1);
oA.innerHTML = '上一頁'
pageDIvBox.appendChild(oA);
}
if(curpageNumfor(var i=1;ivar oA = document.createElement('a');
oA.href = '#' i;
if(curpageNum==i){
oA.innerHTML = i;
}else{
oA.innerHTML = "[" i "]";
}
pageDIvBox.appendChild(oA);
}
}else{
//倒數第一頁的處理
if(allPageNum-curpageNumfor(var i=1;iconsole.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-curpageNumfor(var i=1;iconsole.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 = '[' (curNum-showPageNum-show i) ']'
}
pageDIvBox.appendChild(oA);
}
}else{
for(var i=1;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(curpageNumfor(var i=1;iif(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;ioA[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/