分页栏插件
来源：互联网 发布：站长源码下载 编辑：程序博客网 时间：2024/06/05 23:02
html:
<!DOCTYPE html><html><head> <title>pagebar</title> <meta charset='utf-8'> <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="./pagebar.js"></script> <script type="text/javascript"> $(function(){ var pageBar=$('.hPagenation').pagenation({totalPage:11},'showPageCallBack'); }); /*点击页码栏中页码之后要触发事件*/ function showPageCallBack(pageNow){ console.log('当前页码:'+pageNow); } </script></head><body> <div class="hPagenation"></div> </body></html>js代码：
/** * jquery.pagebar.js * * Date: Mon August 28 2015 */(function($){ var defaults={ /*总页数*/ totalPage:1, /*页码栏每次显示的个数*/ showTotalPage:5 } /*页码栏*/ function pageBar(elem,params,pageCallBackFunc){ this.params=$.extend({},defaults,params); this.$pageRootElem=$(elem); this._init(elem); this.listenPage(elem,this,pageCallBackFunc); }pageBar.prototype={ _init:function(elem){ var pageNum=this.params.totalPage; var showTotalPage=this.params.showTotalPage; var dataTotals=pageNum*showTotalPage; $(elem).append("<span class='dataTotal'>共"+dataTotals+"条数据 共"+pageNum+"页 </span>"); if(1==pageNum){ $(elem).append("<a class='currPage' href='javascript:void(0)'>1</a>"); }else{ var pageBarHtml="<a class='prePage criticalPoint' href='javascript:void(0)'><上一页</a>"+ "<a class='currPage' href='javascript:void(0)'>1</a>"; for(var i=2;i<=showTotalPage;i++){ pageBarHtml+="<a href='javascript:void(0)'>"+i+"</a>"; } if(pageNum>showTotalPage){ pageBarHtml+="<a class='nextOther' href='javascript:void(0)'><span value='"+(showTotalPage+1)+"'>…</span></a>"; } pageBarHtml+="<a class='nextPage' href='javascript:void(0)'>下一页></a>"; $(elem).append(pageBarHtml); } this.renderStyle(elem); return elem; }, /*获取当前页码*/ getPageNow:function(){ return $('a.currPage').text(); }, /* 页码监听事件*/ listenPage:function(elem,pagebarObj,pageCallBackFunc){ var maxPageNum=pagebarObj.params.totalPage; $(elem).children('a').click(function(){ var $curr=$(this); if($curr.hasClass("criticalPoint")){return;} $(elem).children('a').removeClass('criticalPoint'); /*上下页的监听*/ if($curr.hasClass('prePage')){ $curr=$('a.currPage').prev('a'); }else if($curr.hasClass('nextPage')){ $curr=$('a.currPage').next('a'); }else{ var pageNow=$curr.text(); if(1==pageNow){ $(elem).children('.prePage').addClass('criticalPoint'); }else if(maxPageNum==pageNow){ $(elem).children('.nextPage').addClass('criticalPoint'); } } $(elem).children('a').removeClass('currPage'); $curr.addClass('currPage'); /* ……展开页码的监听*/ if($curr.hasClass('nextOther')||$curr.hasClass('prevOther')){ pagebarObj.showOtherPage(elem,$curr,pagebarObj,pageCallBackFunc); } pagebarObj.renderStyle(elem); //触发点击后相应的函数处理 var func=eval(pageCallBackFunc); func(pagebarObj.getPageNow()); }); }, /* ……页码栏的展开*/ showOtherPage:function(elem,$curr,pagebarObj,pageCallBackFunc){ var maxPageNum=pagebarObj.params.totalPage; var showPageNum=pagebarObj.params.showTotalPage; var pageBarHtml="<span class='dataTotal'>共"+(maxPageNum*showPageNum)+"条数据 共"+maxPageNum+"页 </span>";/*展开后一部分的页码*/ if($curr.hasClass('nextOther')){ var nextStartPage=$curr.children('span').attr('value'); var leftPageNum=maxPageNum-nextStartPage; pageBarHtml+="<a class='prePage' href='javascript:void(0)'><上一页</a>"; if(leftPageNum<showPageNum){ pageBarHtml+="<a class='prevOther' href='javascript:void(0)'><span value='"+(nextStartPage-showPageNum)+"'>…</span></a>"; var beforePageNum=showPageNum-leftPageNum; for(var i=beforePageNum-1;i>0;i--){ pageBarHtml+="<a href='javascript:void(0)'>"+(nextStartPage-i)+"</a>"; } for(var afterIndex=0;afterIndex<=leftPageNum;afterIndex++){ pageBarHtml+="<a href='javascript:void(0)'>"+(parseInt(nextStartPage)+parseInt(afterIndex))+"</a>"; } pageBarHtml+="<a class='nextPage' href='javascript:void(0)'>下一页></a>"; }else{ pageBarHtml+="<a class='prevOther' href='javascript:void(0)'><span value='"+(parseInt(nextStartPage)-parseInt(1))+"'>…</span></a>"; var endPageIndex=parseInt(nextStartPage)+parseInt(showPageNum); for(var i=0;i<showPageNum;i++){ pageBarHtml+="<a href='javascript:void(0)'>"+(parseInt(nextStartPage)+parseInt(i))+"</a>"; } pageBarHtml+="<a class='nextOther' href='javascript:void(0)'><span value='"+endPageIndex+"'>…</span></a>"+ "<a class='nextPage' href='javascript:void(0)'>下一页></a>"; } $(elem).html(pageBarHtml); $(elem).children('a').eq(2).addClass('currPage'); }else if($curr.hasClass('prevOther')){ var beforeEndPage=$curr.children('span').attr('value'); /*展开后最后的页码值*/ var resortEndIndex=showPageNum+1; var pageBarHtml=""; if(beforeEndPage-showPageNum<=0){ var beforePageNum=showPageNum-beforeEndPage; for(var i=1;i<beforeEndPage;i++){ pageBarHtml+="<a href='javascript:void(0)'>"+i+"</a>"; } for(var afterIndex=beforeEndPage;afterIndex<=showPageNum;afterIndex++){ pageBarHtml+="<a href='javascript:void(0)'>"+afterIndex+"</a>"; } }else{ pageBarHtml+="<a class='prePage' href='javascript:void(0)'><上一页</a>"+ "<a class='prevOther' href='javascript:void(0)'><span value='"+(parseInt(beforeEndPage)-parseInt(showPageNum))+"'>…</span></a>"; for(var i=showPageNum;i>0;i--){ pageBarHtml+="<a href='javascript:void(0)'>"+(parseInt(beforeEndPage)-parseInt(i-1))+"</a>"; } resortEndIndex=parseInt(beforeEndPage)-parseInt(1) } pageBarHtml+="<a class='nextOther' href='javascript:void(0)'><span value='"+resortEndIndex+"'>…</span></a>"+ "<a class='nextPage' href='javascript:void(0)'>下一页></a>"; $(elem).html(pageBarHtml); $(elem).children('a').eq(-3).addClass('currPage'); } /* 重新监听页码选择事件*/ pagebarObj.listenPage(elem,pagebarObj,pageCallBackFunc); }, renderStyle:function(elem){ $(elem).css({'margin-top':'100px'}); $(elem).children('a').css({"text-decoration":"none","margin-right":"5px","padding":"2px 10px","border":"1px solid #D4D4D4","background":"white","color":"#00acf6"}); $(elem).children('a.currPage').css({'border':'0','background':'#F4F4F4','color':'#656565'}); $(elem).children('.criticalPoint').css({'color':'#d4d4d4','background': '#F4F4F4'}); }, getPageTotal:function(){ return this.params.totalPage; }, getPageNow:function(elem){ return this.$pageRootElem.children('a.currPage').text(); }} $.fn.pagenation=function(args,pageCallBackFunc){ var myPageBar=new pageBar(this,args,pageCallBackFunc); return myPageBar; }})(jQuery)效果图：
0 0
- 分页栏插件
- 分页插件
- 分页插件
- 分页插件
- 分页插件
- 分页插件
- 插件分页
- 分页插件
- 分页插件
- mybatis分页/分页插件
- mybatis分页插件(物理分页)
- mybatis分页插件实现分页
- 转载gridview分页插件
- Query---分页插件
- jquery分页插件
- jquery滚动分页插件
- SMARTY分页插件
- myPagination Jquery 分页 插件
- linux学习(九) date命令详解
- mysql 实现伪序号
- UITableView上拉时崩溃问题及解决
- png压缩
- zzuli OJ 1074: 百钱买百鸡
- 分页栏插件
- Xcode 6制作动态及静态Framework
- 牛顿方法的简单MATLAB编程示意
- 眼图
- C#如何通过反射获取属性值
- 冒泡排序－Bubble Sort
- Jfire-Orm框架1.0推出
- 专访李运华：程序员如何在技术上提升自己
- zzuli OJ 1075: 聚餐人数统计
