jQuery实现的分页功能示例
本文实例讲述了jQuery实现的分页功能。分享给大家供大家参考,具体如下:
1、分页栏HTML码
<divclass="g-cfg-pagerwp"> <divstyle="visibility:hidden"class="g-pager"> </div> </div>
2、CSS样式文件
.g-cf:after{clear:both;content:"";display:table;} .g-cf{zoom:1;} /*分页*/ .g-pager{text-align:center;color:#111111;font:12px/1.5emArial,Tahoma;float:right;} .g-pagera,.g-pagerinput{cursor:pointer;border:solid1px#0F71BE;padding:1px4px;color:#0F71BE;margin:02px;vertical-align:middle;} .g-pagera.cur,.g-pagera:hover{background-color:#0F71BE;color:#fff} .g-pagera.no{border-color:#A3A3A3;color:#A3A3A3;background-color:#E4F2F9} .g-pagerspan{margin-right:10px;} .g-pagerinput{cursor:default;width:28px;padding:1px2px;} .g-pagerwp{height:23px;line-height:23px;padding:5px;margin-bottom:10px;border:1pxsolid#DDDDDD;} .g-pagerwp.g-btn{vertical-align:top}
3、JS脚本文件
①引用JQuery和分页脚本
<scriptsrc="/js/common/jquery-1.6.2.js"type="text/javascript"></script> <scriptsrc="/js/jquery.PageBar.js"type="text/javascript"></script>
②编写jquery.PageBar.js脚本
/**************************/ //JQuery分页栏 /**************************/ $.fn.pageBar=function(options){ varconfigs={ PageIndex:1, PageSize:15, TotalPage:0, RecordCount:0, showPageCount:4, onPageClick:function(pageIndex){ returnfalse;//默认的翻页事件 } } $.extend(configs,options); vartmp="", i=0, j=0, a=0, b=0, totalpage=parseInt(configs.RecordCount/configs.PageSize); totalpage=configs.RecordCount%configs.PageSize>0?totalpage+1:totalpage; tmp+="<span>总记录数:"+configs.RecordCount+"</span>"; tmp+="<span>页数:"+totalpage+"</span>"; if(configs.PageIndex>1){ tmp+="<a><</a>" }else{ tmp+="<aclass=\"no\"><</a>" } tmp+="<a>1</a>"; if(totalpage>configs.showPageCount+1){ if(configs.PageIndex<=configs.showPageCount){ i=2; j=i+configs.showPageCount; a=1; }elseif(configs.PageIndex>totalpage-configs.showPageCount){ i=totalpage-configs.showPageCount; j=totalpage; b=1; }else{ vark=parseInt((configs.showPageCount-1)/2); i=configs.PageIndex-k; j=configs.PageIndex+k+1; a=1; b=1; if((configs.showPageCount-1)%2){ i-=1 } } } else{ i=2; j=totalpage; } if(b){ tmp+="..." } for(;i<j;i++){ tmp+="<a>"+i+"</a>" } if(a){ tmp+="..." } if(totalpage>1){ tmp+="<a>"+totalpage+"</a>" } if(configs.PageIndex<totalpage){ tmp+="<a>></a>" }else{ tmp+="<aclass=\"no\">></a>" } tmp+="<inputtype=\"text\"/><a>Go</a>" varpager=this.html(tmp) varindex=pager.children('input')[0] pager.children('a').click(function(){ varcls=$(this).attr('class'); if(this.innerHTML=='<'){ if(cls!='no'){ configs.onPageClick(configs.PageIndex-2) } }elseif(this.innerHTML=='>'){ if(cls!='no'){ configs.onPageClick(configs.PageIndex) } }elseif(this.innerHTML=='Go'){ if(!isNaN(index.value)){ varindexvalue=parseInt(index.value); indexvalue=indexvalue<1?1:indexvalue indexvalue=indexvalue>totalpage?totalpage:indexvalue configs.onPageClick(indexvalue-1) } }else{ if(cls!='cur'){ configs.onPageClick(parseInt(this.innerHTML)-1) } } }).each(function(){ if(configs.PageIndex==parseInt(this.innerHTML)){ $(this).addClass('cur') } }) }
③初始化使用
$(document).ready(function(){ //设置分页信息 varpageOptions={ AllowPaging:true, PageIndex:1,//设置当前页码 PageSize:15,//设置分页大小 RecordCount:1092,//设置数据总数 TotalPage:73,//设置总页数 showPageCount:4, onPageClick:function(pageIndex){ alert("您点击了第"+parseInt(pageIndex+1)+"页");//自定义您的翻页事件 returnfalse; } } //初始化分页栏 $('.g-pagerwp.g-pager').css('visibility','visible').pageBar(pageOptions); })
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。