javascript实现简单的分页特效
下面是一段javascript实现的分页代码,当然必须要结合后台代码实现。大家可以自行分析一下代码,希望能够给大家带来一定的帮助,代码如下:
<scripttype="text/javascript"> functionsetPage(opt) { if(!opt.pageDivId||opt.allPageNum<opt.curpageNum||opt.allPageNum<opt.showPageNum) { returnfalse } varallPageNum=opt.allPageNum;//总的页数 varshowPageNum=opt.showPageNum;//显示的页数 varcurpageNum=opt.curpageNum;//当前的页数 varpageDIvBox=document.getElementById(opt.pageDivId); //左边或右边显示页码的个数 varlrNum=Math.floor(showPageNum/2); if(curpageNum>1) { varoA=document.createElement('a'); oA.href='#1'; oA.innerHTML='首页' pageDIvBox.appendChild(oA); } if(curpageNum>1) { varoA=document.createElement('a'); oA.href='#'+(curpageNum-1); oA.innerHTML='上一页' pageDIvBox.appendChild(oA); } if(curpageNum<showPageNum-2||allPageNum==showPageNum) { for(vari=1;i<=showPageNum;i++) { varoA=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(vari=1;i<=showPageNum;i++) { console.log((curpageNum-showPageNum+i)); varoA=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); } } //最后一页的处理 elseif(allPageNum-curpageNum<lrNum&&curpageNum==allPageNum) { for(vari=1;i<=showPageNum;i++) { console.log((curpageNum-showPageNum+i)); varoA=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(vari=1;i<=showPageNum;i++) { varoA=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(vari=1;i<=2;i++) { if(i==1) { varoA=document.createElement('a'); oA.href='#'+(parseInt(curpageNum)+1); oA.innerHTML='下一页' } else { varoA=document.createElement('a'); oA.href='#'+allPageNum; oA.innerHTML='尾页' } pageDIvBox.appendChild(oA); } } varoA=document.getElementsByTagName('a'); //给页码添加点击事件 for(vari=0;i<oA.length;i++) { oA[i].onclick=function(){ //当前点的页码 varsHref=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> <styletype="text/css"> body{ font-size:12px; } </style> </head> <body> <inputtype="button"value="分页"onclick="initializePageNav(1)"> <divid="pageDir"></div> <scriptlanguage="JavaScript"> <!-- functioninitializePageNav(iCurrPage) { variPageSize=20; variProCount=2121; varb=((iProCount%iPageSize)!=0); variPageCount=parseInt(iProCount/iPageSize)+(b?1:0); if(iCurrPage>iPageCount)returnfalse; iCurrPage=parseInt(iCurrPage); varsTemp=""; varsTemp1="每页:"+iPageSize+"/<spanstyle='color:red'>"+iProCount+"</span>条页数:<spanstyle='color:blue'>"+iCurrPage+"</span>/"+iPageCount+"页"; varsTemp2="<inputtype=\"text\"id=\"goPageNo\"value=\""+iCurrPage+"\"size=\"3\"/><inputtype=\"button\"value=\"GO\"onclick=\"initializePageNav($('goPageNo').value);\"/>" if(iProCount==0) { sTemp="<fontcolor='#cccccc'>首页上一页下一页末页</font>"; } elseif(iPageCount==1) { sTemp="<fontcolor='#cccccc'>首页上一页下一页末页</font>" } elseif(iPageCount==iCurrPage) { sTemp="<ahref='Javascript:initializePageNav(1)'>首页</a><ahref='Javascript:initializePageNav("+(iPageCount-1)+")'>上一页</a><fontcolor='#cccccc'>下一页末页</font>" } elseif(iCurrPage==1) { sTemp="<fontcolor='#cccccc'>首页上一页</font><ahref='Javascript:initializePageNav("+(iCurrPage+1)+")'>下一页</a><ahref='Javascript:initializePageNav("+iPageCount+")'>末页</a>" } else { sTemp="<ahref='Javascript:initializePageNav(1)'>首页</a><ahref='Javascript:initializePageNav("+(iCurrPage-1)+")'>上一页</a><ahref='Javascript:initializePageNav("+(iCurrPage+1)+")'>下一页</a><ahref='Javascript:initializePageNav("+(iPageCount)+")'>末页</a>" } $("pageDir").innerHTML=sTemp+""+sTemp2+""+sTemp1; CollectGarbage(); } function$(o) { returndocument.getElementById(o); } initializePageNav(1) //--> </script> </body> </html>
示例三:
实现的效果是:上一页、第一页、…(上n个页码)、n个页码、…(下n个页码)、最后一页、下一页。n可以是奇数也可以是偶数,一般都喜欢取奇数
//总页数,当前页数,跳转地址,第一页和最后一页之间显示的页码数量 functionpageBar(tp,cp,url,pn){ varstr=‘<ulclass=”page”>'; if(tp>1&&cp>1){ varprev=cp-1; str+=‘<li><aclass=”prev”title=”上一页”href=”javascript:goPage(‘+prev+‘,\”+url+‘\');”><span>上一页</span></a></li>‘; }else{ str+=‘<li><aclass=”prev”title=”上一页”href=”javascript:void(0);”><span>上一页</span></a></li>‘; } if(tp>1){ //第一页 if(cp==1){ str+=‘<liclass=”current”><ahref=”javascript:goPage(1,\”+url+‘\');”><span>1</span></a></li>‘; }else{ str+=‘<li><ahref=”javascript:goPage(1,\”+url+‘\');”><span>1</span></a></li>‘; } if(tp>2){ varpnh=Math.floor(pn/2); //循环开始页码 vars=cp-pnh; if(s<=1){ s=2; } //循环结束页码 vare=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){ varsp=cp-pn; if(sp<1){ sp=1; } str+=‘<li><aname=”break”href=”javascript:goPage(‘+sp+‘,\”+url+‘\');”><span>…</span></a></li>‘; } for(vari=s;i<=e;i++){ if(i==cp){ str+=‘<liclass=”current”><ahref=”javascript:goPage(‘+i+‘,\”+url+‘\');”><span>'+i+‘</span></a></li>‘; }else{ str+=‘<li><ahref=”javascript:goPage(‘+i+‘,\”+url+‘\');”><span>'+i+‘</span></a></li>‘; } } //最后一页前的多页跳转 if(e<(tp-1)){ varep=cp+pn; if(ep>tp){ ep=tp; } str+=‘<li><aname=”break”href=”javascript:goPage(‘+ep+‘,\”+url+‘\');”><span>…</span></a></li>‘; } } //最后一页 if(cp==tp){ str+=‘<liclass=”current”><ahref=”javascript:goPage(‘+tp+‘,\”+url+‘\');”><span>'+tp+‘</span></a></li>‘; }else{ str+=‘<li><ahref=”javascript:goPage(‘+tp+‘,\”+url+‘\');”><span>'+tp+‘</span></a></li>‘; } }else{ str+=‘<liclass=”current”><ahref=”javascript:void(0);”><span>1</span></a></li>‘; } if(tp>1&&cp<tp){ varnext=cp+1; str+=‘<li><aclass=”next”title=”下一页”href=”javascript:goPage(‘+next+‘,\”+url+‘\');”><span>下一页</span></a></li>'; }else{ str+=‘<li><aclass=”next”title=”下一页”href=”javascript:void(0);”><span>下一页</span></a></li>'; } str+=‘</ul>'; returnstr; } //跳转页码,跳转地址 functiongoPage(cp,url){ window.location.href=url+cp; }