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; }