下面是一段javascript實(shí)現(xiàn)的分頁(yè)代碼，當(dāng)然必須要結(jié)合后臺(tái)代碼實(shí)現(xiàn)。大家可以自行分析一下代碼，希望能夠給大家?guī)?lái)一定的幫助,代碼如下:
<script type="text/javascript">function setPage(opt){ if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum) { return false } var allPageNum=opt.allPageNum; //總的頁(yè)數(shù) var showPageNum=opt.showPageNum; //顯示的頁(yè)數(shù) var curpageNum=opt.curpageNum; // 當(dāng)前的頁(yè)數(shù) var pageDIvBox=document.getElementById(opt.pageDivId); //左邊或右邊顯示頁(yè)碼的個(gè)數(shù) var lrNum=Math.floor(showPageNum/2); if(curpageNum>1) { var oA=document.createElement('a'); oA.href='#1'; oA.innerHTML='首頁(yè)' pageDIvBox.appendChild(oA); } if(curpageNum>1) { var oA=document.createElement('a'); oA.href='#'+(curpageNum-1); oA.innerHTML='上一頁(yè)' 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ù)第一頁(yè)的處理 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); } } //最后一頁(yè)的處理 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 = '下一頁(yè)' } else { var oA = document.createElement('a'); oA.href='#'+allPageNum; oA.innerHTML = '尾頁(yè)' } pageDIvBox.appendChild(oA); } } var oA = document.getElementsByTagName('a'); //給頁(yè)碼添加點(diǎn)擊事件 for(var i=0;i<oA.length;i++) { oA[i].onclick = function(){ //當(dāng)前點(diǎn)的頁(yè)碼 var sHref = this.getAttribute('href').substring(1); //清空頁(yè)數(shù)顯示 pageDIvBox.innerHTML = ''; setPage({ pageDivId:'page', showPageNum:5, //顯示的個(gè)數(shù) allPageNum:10, //總頁(yè)數(shù) curpageNum:sHref //當(dāng)前頁(yè)數(shù) }) } } } window.onload=function(){ setPage({ pageDivId:'page', showPageNum:5, //顯示的個(gè)數(shù) allPageNum:10, //總頁(yè)數(shù) curpageNum:1 //當(dāng)前頁(yè)數(shù) }) } </script>示例二：
<html><head><style type="text/css">body{ font-size:12px;}</style></head><body><input type="button" value="分頁(yè)" onclick="initializePageNav(1)"><div id="pageDir"></div><script language="JavaScript"><!--function initializePageNav(iCurrPage){ var iPageSize = 20; var iProCount = 2121; var b = ((iProCount%iPageSize)!=0); var iPageCount = parseInt(iProCount/iPageSize)+(b?1:0); if (iCurrPage > iPageCount) return false; iCurrPage = parseInt(iCurrPage); var sTemp = ""; var sTemp1 = "每頁(yè):"+ iPageSize +"/<span style='color:red'>"+ iProCount +"</span>條 頁(yè)數(shù):<span style='color:blue'>"+ iCurrPage +"</span>/"+ iPageCount +"頁(yè)"; var sTemp2 = "<input type=/"text/" id=/"goPageNo/" value=/""+iCurrPage+"/" size=/"3/" /><input type=/"button/" value=/"GO/" onclick=/"initializePageNav($('goPageNo').value);/" />" if (iProCount==0) { sTemp = "<font color='#cccccc'>首頁(yè) 上一頁(yè) 下一頁(yè) 末頁(yè)</font>"; } else if (iPageCount==1) { sTemp = "<font color='#cccccc'>首頁(yè) 上一頁(yè) 下一頁(yè) 末頁(yè)</font>" } else if (iPageCount==iCurrPage) { sTemp = "<a href='Javascript:initializePageNav(1)'>首頁(yè)</a> <a href='Javascript:initializePageNav("+(iPageCount-1)+")'>上一頁(yè)</a> <font color='#cccccc'>下一頁(yè) 末頁(yè)</font>" } else if (iCurrPage==1) { sTemp = "<font color='#cccccc'>首頁(yè) 上一頁(yè) </font><a href='Javascript:initializePageNav("+(iCurrPage+1)+")'>下一頁(yè)</a> <a href='Javascript:initializePageNav("+iPageCount+")'>末頁(yè)</a>" } else { sTemp = "<a href='Javascript:initializePageNav(1)'>首頁(yè)</a> <a href='Javascript:initializePageNav("+(iCurrPage-1)+")'>上一頁(yè)</a> <a href='Javascript:initializePageNav("+(iCurrPage+1)+")'>下一頁(yè)</a> <a href='Javascript:initializePageNav("+(iPageCount)+")'>末頁(yè)</a>" } $("pageDir").innerHTML = sTemp +" "+ sTemp2 + " " + sTemp1 ; CollectGarbage();}function $(o){ return document.getElementById(o);}initializePageNav(1)//--></script></body></html>示例三：
實(shí)現(xiàn)的效果是：上一頁(yè)、第一頁(yè)、…（上n個(gè)頁(yè)碼）、n個(gè)頁(yè)碼、…（下n個(gè)頁(yè)碼）、最后一頁(yè)、下一頁(yè)。n可以是奇數(shù)也可以是偶數(shù)，一般都喜歡取奇數(shù)
//總頁(yè)數(shù)，當(dāng)前頁(yè)數(shù)，跳轉(zhuǎn)地址，第一頁(yè)和最后一頁(yè)之間顯示的頁(yè)碼數(shù)量function pageBar(tp,cp,url,pn){ var str = ‘<ul class=”page”>'; if(tp>1 && cp>1){ var prev = cp-1; str += ‘<li><a class=”prev” title=”上一頁(yè)” href=”javascript:goPage(‘+prev+‘,/”+url+‘/');”><span>上一頁(yè)</span></a></li> ‘; }else{ str += ‘<li><a class=”prev” title=”上一頁(yè)” href=”javascript:void(0);”><span>上一頁(yè)</span></a></li> ‘; } if(tp>1){ //第一頁(yè) if(cp==1){ str +=‘<li class=”current”><a href=”javascript:goPage(1,/”+url+‘/');”><span>1</span></a></li> ‘; }else{ str +=‘<li><a href=”javascript:goPage(1,/”+url+‘/');”><span>1</span></a></li> ‘; } if(tp>2){ var pnh = Math.floor(pn/2); //循環(huán)開始頁(yè)碼 var s = cp-pnh; if(s<=1){ s = 2; } //循環(huán)結(jié)束頁(yè)碼 var e = cp+pnh; if(e>=tp){ e = tp-1; } if(s<=(1+pnh)){ if(tp>(pn+2)){ e = s+(pn-1); if(e>=tp){ e = tp-1; } }else{ s = 2; } } if(e>=(tp-pnh)){ if(tp>(pn+2)){ s = e-(pn-1); if(s<=1){ s = 2; } }else{ e = tp-1; } } if(e<s){ e = s; } //第一頁(yè)后的多頁(yè)跳轉(zhuǎn) if(s>2){ var sp = cp-pn; if(sp<1){ sp=1; } str += ‘<li><a name=”break” href=”javascript:goPage(‘+sp+‘,/”+url+‘/');”><span>…</span></a></li> ‘; } for(var i=s;i<=e;i++){ if(i==cp){ str += ‘<li class=”current”><a href=”javascript:goPage(‘+i+‘,/”+url+‘/');”><span>'+i+‘</span></a></li> ‘; }else{ str += ‘<li><a href=”javascript:goPage(‘+i+‘,/”+url+‘/');”><span>'+i+‘</span></a></li> ‘; } } //最后一頁(yè)前的多頁(yè)跳轉(zhuǎn) if(e < (tp-1)){ var ep = cp+pn; if(ep>tp){ ep=tp; } str += ‘<li><a name=”break” href=”javascript:goPage(‘+ep+‘,/”+url+‘/');”><span>…</span></a></li> ‘; } } //最后一頁(yè) if(cp==tp){ str +=‘<li class=”current”><a href=”javascript:goPage(‘+tp+‘,/”+url+‘/');”><span>'+tp+‘</span></a></li> ‘; }else{ str +=‘<li><a href=”javascript:goPage(‘+tp+‘,/”+url+‘/');”><span>'+tp+‘</span></a></li> ‘; } }else{ str +=‘ <li class=”current”><a href=”javascript:void(0);”><span>1</span></a></li> ‘; } if(tp>1 && cp<tp){ var next = cp+1; str += ‘<li><a class=”next” title=”下一頁(yè)” href=”javascript:goPage(‘+next+‘,/”+url+‘/');”><span>下一頁(yè)</span></a></li>'; }else{ str += ‘<li><a class=”next” title=”下一頁(yè)” href=”javascript:void(0);”><span>下一頁(yè)</span></a></li>'; } str += ‘</ul>'; return str; } //跳轉(zhuǎn)頁(yè)碼，跳轉(zhuǎn)地址 function goPage(cp,url){ window.location.href = url+cp; }新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
