下面是一段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></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='https://www.jb51.net/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='https://www.jb51.net/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>
示例三：