下面是一段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="分页"> <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>"+ iProCount +"</span>条 页数:<span>"+ 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; }
【javascript实现简单的分页特效】相关文章：
★ JavaScript实现DIV层拖动及动态增加新层的方法
★ JavaScript中Number.MAX_VALUE属性的使用方法