pageGroup.js实现分页功能
本文实例为大家分享了pageGroup.js实现分页功能的具体代码,供大家参考,具体内容如下
1.html页面
引入
{{ifmaxPage>0}}//总页数 上一页
本文实例为大家分享了pageGroup.js实现分页功能的具体代码,供大家参考,具体内容如下
1.html页面
引入
{{ifmaxPage>0}}//总页数 上一页
2.pageGroup.css
/*CSSDocument*/ /*分页*/ #pageGro{width:400px;height:25px;margin:0pxauto;padding-top:30px;} #pageGrodiv,#pageGrodivulli{font-size:12px;color:#999;line-height:23px;float:left;margin-left:5px;} #pageGrodivulli{width:22px;text-align:center;border:1pxsolid#999;cursor:pointer;} #pageGrodivulli.on{color:#fff;background:#3c90d9;border:1pxsolid#3c90d9;} #pageGro.pageUp,#pageGro.pageDown{width:63px;border:1pxsolid#999;cursor:pointer;} #pageGro.pageUp{text-indent:23px;background:url(/images/pageUp.png)5px7pxno-repeat;} #pageGro.pageDown{text-indent:5px;background:url(/images/pageDown.png)46px6pxno-repeat;}
3.pageGroup.js
//JavaScriptDocument $(function(){ //根据总页数判断,如果小于5页,则显示所有页数,如果大于5页,则显示5页。根据当前点击的页数生成 varmaxPage=jQuery("#countPage").text(); varnowPage=jQuery("#nowPage").text(); varindex=parseInt(nowPage);//当前页 vartitle=jQuery("#title").text(); varpageCount=parseInt(maxPage);//模拟后台总页数 //生成分页按钮 if(pageCount>5){ page_icon(1,5,0); pageGroup(index,pageCount); }else{ //alert("66"); page_icon(1,pageCount,0); pageGroup(index,pageCount); } //点击分页按钮触发 $("#pageGroli").live("click",function(){ if(pageCount>5){ varpageNum=parseInt($(this).html());//获取当前页数 window.location.href="/article/search/"+title+"/"+pageNum; pageGroup(pageNum,pageCount); }else{ varindexpage=jQuery(this).text(); window.location.href="/article/search/"+title+"/"+indexpage; $(this).addClass("on"); $(this).siblings("li").removeClass("on"); } }); //点击上一页触发 $("#pageGro.pageUp").click(function(){ if(pageCount>5){ if(index>1){ window.location.href="/article/search/"+title+"/"+(index-1); } }else{ if(index>1){ window.location.href="/article/search/"+title+"/"+(index-1); $("#pageGroli").removeClass("on");//清除所有选中 } } }); //点击下一页触发 $("#pageGro.pageDown").click(function(){ if(pageCount>5){ if(nowPage5){ switch(pageNum){ case1: page_icon(1,5,0); break; case2: page_icon(1,5,1); break; casepageCount-1: page_icon(pageCount-4,pageCount,3); break; casepageCount: page_icon(pageCount-4,pageCount,4); break; default: page_icon(pageNum-2,pageNum+2,2); break; } } if(pageCount<5){ switch(pageNum){ case1: page_icon(1,pageCount,0); break; case2: page_icon(1,pageCount,1); break; casepageCount-1: page_icon(1,pageCount,2); break; casepageCount: page_icon(1,pageCount,3); break; } } if(pageCount==5){ switch(pageNum){ case1: page_icon(1,pageCount,0); break; case2: page_icon(1,pageCount,1); break; casepageCount-1: page_icon(1,pageCount,3); break; casepageCount: page_icon(1,pageCount,4); break; default: page_icon(1,pageNum+2,2); break; } } } //根据当前选中页生成页面点击按钮 functionpage_icon(page,count,eq){ varul_html=""; for(vari=page;i<=count;i++){ ul_html+=" "+i+" "; } $("#pageGroul").html(ul_html); $("#pageGroulli").eq(eq).addClass("on"); } //上一页 functionpageUp(pageNum,pageCount){ switch(pageNum){ case1: break; case2: page_icon(1,5,0); break; casepageCount-1: page_icon(pageCount-4,pageCount,2); break; casepageCount: page_icon(pageCount-4,pageCount,3); break; default: page_icon(pageNum-2,pageNum+2,1); break; } } //下一页 functionpageDown(pageNum,pageCount){ switch(pageNum){ case1: page_icon(1,5,1); break; case2: page_icon(1,5,2); break; casepageCount-1: page_icon(pageCount-4,pageCount,4); break; casepageCount: break; default: page_icon(pageNum-2,pageNum+2,3); break; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。