用面向对象实现的纯js分页

纯的javascript实现的面向对象的分页脚本 ，万能的分页脚本，跨平台的分页脚本

最近因为项目的原因，把此前写的分页组件重构了下，现在的显示风格是类似百度的那种，对整个代码的结构也优化了，增加了几个亮点：
1、将参数对象化，这也是“javascript语言精粹”中提倡的，这样可以方便的处理默认参数。
2、通过传入参数显示的支持了分页是异步还是同步的，默认是同步的，即刷新的。
3、添加了和CSS的接口，组件本身已经完全实现了功能，并有基本的样式，但是通过CSS的接口，可以使得通过附加的外部样式来改变或者美化分页的显示效果。

欢迎大家指正，在项目中使用后，同事都说不错，呵呵。

 

 

/**  * 带页码的分页* new PagerB({recordCount:36, pageContainer:"page",funPageSearch:function(currentPage){location="testPage.html?currentPage="+currentPage;},currentPage:1,pageSize:10,pageNum=12,sync:false});<br/>* recordCount 总的记录数<br/>   * pageContainer容纳分页元素的id<br/>* funPageSearch 回调的查询方法<br/>* currentPage 当前页,默认为1<br/>* pageSize 每页的记录数，默认10条<br/>  * pageNum 每页显示的页码数量，默认值=10，最小值亦为10<br/>* sync 同步还是异步，默认为同步<br/>* @author:yxd<br/>* email:[e-mail]

* 附加的样式代码  <style type="text/css">       #pager{text-align:center;margin:30px auto;padding:3px}       #pager>span{font-weight:700;}       #pager>div span{margin:2px;padding:3px 5px;}       #pager span.use{border:#dbdbdb 1px solid;color:#666;text-decoration:none; cursor:pointer;}       #pager>div span.cur{background:#fb4e0b;border:1px solid #f03b00;color:#fff}       #pager>div span.use:hover{background:#fb4e0b;border:1px solid #f03b00;color:#fff}       #pager .unUse{display:none}   </style>     */ function PagerB(pageInfo){  this.recordCount=pageInfo.recordCount;this.pageSize=pageInfo.pageSize || 10;this.pageContainer=$("#"+pageInfo.pageContainer);   this.funPageSearch=pageInfo.funPageSearch;this.currentPage=pageInfo.currentPage || 1;this.totalPage=this.calculateTotalPage();  this.pageNum=Math.max(pageInfo.pageNum || 10 , 10);  pageInfo.sync===false ? this.sync=false:this.sync=true;    this.htmlNumContainer=null;//页码的容器div  this.htmlFirstPage=null; //首页  this.htmlPrvPage=null; //上一页  this.htmlNextPage=null; //下一页  this.htmlLastPage=null; //尾页  this.htmlPageNumContainer=null; //页码集合的容器div  this.htmlPageNum=null; //所有页码的集合   this.htmlTotalRecord=null; //  this.htmlPageSize=null;  this.htmlTotalPage=null;    this.draw(); } PagerB.prototype={  draw:function(){  /*  *页码的显示形式为：  * <div id="pager">  * 共<span>300</span>行    * 每页<span>20</span>行    * 共<span>15</span>页  * <div class="a">  * <span class="unUse">首页</span>  * <span class="unUse">上一页</span>  * <div class="b">  * <span class="cur">1</span>  * <span class="use">2</span>  * <span class="use">3</span>  * </div>  * <span class="use">下一页</span>  * <span class="use">尾页</span>  * </div>  * </div>    */  var that=this;var pageHtml='共<span>'+this.recordCount+'</span>行   '+'每页<span>'+this.pageSize+'</span>行   '+'共<span>'+this.totalPage+'</span>页   '+"<div class='a' style='display:none'>"+"<span>首页</span> "+"<span>上一页</span> "+"<div class='b' style='display:inline'>"+this.setPageNum()+"</div>"+" <span>下一页</span>"+" <span>尾页</span>"+"</div>";this.pageContainer.append(pageHtml);this.htmlTotalRecord=$("span:eq(0)",this.pageContainer);this.htmlPageSize=$("span:eq(1)",this.pageContainer);this.htmlTotalPage=$("span:eq(2)",this.pageContainer);this.htmlNumContainer=$(".a",this.pageContainer);this.htmlFirstPage=$(".a > span:eq(0)",this.pageContainer);this.htmlPrvPage=$(".a > span:eq(1)",this.pageContainer); this.htmlNextPage=$(".a > span:eq(2)",this.pageContainer);this.htmlLastPage=$(".a > span:eq(3)",this.pageContainer);this.htmlPageNumContainer=$(".b",this.htmlNumContainer);this.htmlPageNum=$("span",this.htmlPageNumContainer);this.htmlFirstPage.click(function(){if(that.currentPage!=1){that.currentPage=1;that.gotoPage();}});this.htmlPrvPage.click(function(){if(that.currentPage!=1){that.currentPage--;that.gotoPage();} });this.htmlNextPage.click(function(){if(that.currentPage!=that.totalPage){that.currentPage++;that.gotoPage();}});this.htmlLastPage.click(function(){if(that.currentPage!=that.totalPage){that.currentPage=that.totalPage;that.gotoPage();}});if(this.totalPage>1){ this.htmlNumContainer.css("display","inline"); this.setStyle();}},  setPageNum:function(){//设置每页显示的页码，//页码的显示取决与3个因素：//1、每页显示的页码数量//2、当前页//3、总页数 var pageNumArray=[];var firstNum=1,lastNum=this.totalPage;  //当总页数>每页显示的页数时才需要额外的处理   if(this.totalPage>this.pageNum){var halfNum=Math.floor(this.pageNum/2);firstNum=this.currentPage-halfNum;if(firstNum<=0){firstNum=1;}else{var isTotalPage=false;while((firstNum+this.pageNum)>(this.totalPage+1)){isTotalPage=true;firstNum--;}}if(isTotalPage){lastNum=this.totalPage;}else{lastNum=firstNum+this.pageNum-1;} }   for(var i=firstNum;i<=lastNum;i++){pageNumArray.push("<span>"+i+"</span>");} return pageNumArray.join(" ");},setStyle:function(){//设置显示的样式var that=this;if(this.currentPage!=1){this.htmlFirstPage.css({cursor:"pointer",color:""}).removeClass("unUse").addClass("use");this.htmlPrvPage.css({cursor:"pointer",color:""}).removeClass("unUse").addClass("use");}else{this.htmlFirstPage.css({cursor:"",color:"grey"}).removeClass("use").addClass("unUse");this.htmlPrvPage.css({cursor:"",color:"grey"}).removeClass("use").addClass("unUse");}if(this.currentPage!=this.totalPage){this.htmlLastPage.css({cursor:"pointer",color:""}).removeClass("unUse").addClass("use");this.htmlNextPage.css({cursor:"pointer",color:""}).removeClass("unUse").addClass("use");}else{this.htmlLastPage.css({cursor:"",color:"grey"}).removeClass("use").addClass("unUse");this.htmlNextPage.css({cursor:"",color:"grey"}).removeClass("use").addClass("unUse");}this.htmlPageNum.each(function(){var pageNum=Number($(this).html());if(that.currentPage!=pageNum){$(this).css({cursor:"pointer",textDecoration:"underline"}).click(function(){that.currentPage=pageNum;that.gotoPage();}).mouseover(function(){$(this).css("color","green");}).mouseout(function(){$(this).css("color","");}).removeClass("cur").addClass("use");}else{$(this).css("color","blue").removeClass("use").addClass("cur");}});},reDraw:function(_recordCount,_pageSize){this.recordCount=_recordCount;this.pageSize=_pageSize || this.pageSize;this.currentPage=1;this.totalPage=this.calculateTotalPage();this.htmlTotalRecord.html(this.recordCount);  this.htmlPageSize.html(this.pageSize);  this.htmlTotalPage.html(this.totalPage);if(this.totalPage>1){this.htmlNumContainer.css("display","inline");this.htmlPageNumContainer.html(this.setPageNum());this.htmlPageNum=$("span",this.htmlPageNumContainer);this.setStyle();}else{this.htmlNumContainer.css("display","none");}},     calculateTotalPage:function(){//计算总页数return Math.floor((this.recordCount+this.pageSize-1)/this.pageSize);},gotoPage:function(){if(!this.sync){//异步时，需要更新组件的外观this.htmlPageNumContainer.html(this.setPageNum());this.htmlPageNum=$("span",this.htmlPageNumContainer);this.setStyle();}this.funPageSearch(this.currentPage);} };     

  

效果如下图所示：