首頁 > 開發者 > JavaScript
下面是一段javascript實現的分頁代碼，當然必須要結合後台代碼實現。大家可以自行分析一下代碼，希望能夠給大家帶來一定的協助,代碼如下:
<script type="text/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='#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 //當前頁數 }) } </script>
樣本二：
<html><head><style type="text/css">body{ font-size:12px;}</style></head><body><input type="button" value="分頁" 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 = "每頁:"+ iPageSize +"/<span style='color:red'>"+ iProCount +"</span>條 頁數:<span style='color:blue'>"+ iCurrPage +"</span>/"+ iPageCount +"頁"; 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'>首頁 上一頁 下一頁 末頁</font>"; } else if (iPageCount==1) { sTemp = "<font color='#cccccc'>首頁 上一頁 下一頁 末頁</font>" } else if (iPageCount==iCurrPage) { sTemp = "<a href='Javascript:initializePageNav(1)'>首頁</a> <a href='Javascript:initializePageNav("+(iPageCount-1)+")'>上一頁</a> <font color='#cccccc'>下一頁 末頁</font>" } else if (iCurrPage==1) { sTemp = "<font color='#cccccc'>首頁 上一頁 </font><a href='Javascript:initializePageNav("+(iCurrPage+1)+")'>下一頁</a> <a href='Javascript:initializePageNav("+iPageCount+")'>末頁</a>" } else { sTemp = "<a href='Javascript:initializePageNav(1)'>首頁</a> <a href='Javascript:initializePageNav("+(iCurrPage-1)+")'>上一頁</a> <a href='Javascript:initializePageNav("+(iCurrPage+1)+")'>下一頁</a> <a href='Javascript:initializePageNav("+(iPageCount)+")'>末頁</a>" } $("pageDir").innerHTML = sTemp +" "+ sTemp2 + " " + sTemp1 ; CollectGarbage();}function $(o){ return document.getElementById(o);}initializePageNav(1)//--></script></body></html>
樣本三：
實現的效果是：上一頁、第一頁、…（上n個頁碼）、n個頁碼、…（下n個頁碼）、最後一頁、下一頁。n可以是奇數也可以是偶數，一般都喜歡取奇數
//總頁數，當前頁數，跳轉地址，第一頁和最後一頁之間顯示的頁碼數量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=”上一頁” href=”javascript:goPage(‘+prev+‘,\”+url+‘\');”><span>上一頁</span></a></li> ‘; }else{ str += ‘<li><a class=”prev” title=”上一頁” href=”javascript:void(0);”><span>上一頁</span></a></li> ‘; } if(tp>1){ //第一頁 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); //迴圈開始頁碼 var s = cp-pnh; if(s<=1){ s = 2; } //迴圈結束頁碼 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; } //第一頁後的多頁跳轉 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> ‘; } } //最後一頁前的多頁跳轉 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> ‘; } } //最後一頁 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=”下一頁” href=”javascript:goPage(‘+next+‘,\”+url+‘\');”><span>下一頁</span></a></li>'; }else{ str += ‘<li><a class=”next” title=”下一頁” href=”javascript:void(0);”><span>下一頁</span></a></li>'; } str += ‘</ul>'; return str; } //跳轉頁碼，跳轉地址 function goPage(cp,url){ window.location.href = url+cp; }
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
