js面向对象分页器

  1. /**  
  2.   * 带页码的分页  
  3. new PagerB({  
  4. recordCount:36,   
  5. pageContainer:"page",  
  6. funPageSearch:function(currentPage){  
  7. location="testPage.html?currentPage="+currentPage;  
  8. },  
  9. currentPage:1,  
  10. pageSize:10,  
  11. pageNum=12,  
  12. sync:false  
  13. });<br/>  
  14. * recordCount 总的记录数<br/>     
  15. * pageContainer容纳分页元素的id<br/>  
  16. * funPageSearch 回调的查询方法<br/>  
  17. * currentPage 当前页,默认为1<br/>  
  18. * pageSize 每页的记录数,默认10条<br/>    
  19. * pageNum 每页显示的页码数量,默认值=10,最小值亦为10<br/>  
  20. * sync 同步还是异步,默认为同步<br/>  
  21. * @author:yxd<br/>  
  22. * email:yxd_yxd2008@163.com  
[javascript] view plaincopy
  1. * 附加的样式代码  
  2.   <style type="text/css">  
  3.        #pager{text-align:center;margin:30px auto;padding:3px}  
  4.        #pager>span{font-weight:700;}  
  5.        #pager>div span{margin:2px;padding:3px 5px;}  
  6.        #pager span.use{border:#dbdbdb 1px solid;color:#666;text-decoration:none; cursor:pointer;}  
  7.        #pager>div span.cur{background:#fb4e0b;border:1px solid #f03b00;color:#fff}  
  8.        #pager>div span.use:hover{background:#fb4e0b;border:1px solid #f03b00;color:#fff}  
  9.        #pager .unUse{display:none}  
  10.    </style>  
  11.        
  12. */  
  13.  function PagerB(pageInfo){  
  14.   this.recordCount=pageInfo.recordCount;  
  15. this.pageSize=pageInfo.pageSize || 10;  
  16. this.pageContainer=$("#"+pageInfo.pageContainer);     
  17. this.funPageSearch=pageInfo.funPageSearch;  
  18. this.currentPage=pageInfo.currentPage || 1;  
  19. this.totalPage=this.calculateTotalPage();  
  20.   this.pageNum=Math.max(pageInfo.pageNum || 10 , 10);  
  21.   pageInfo.sync===false ? this.sync=false:this.sync=true;  
  22.     
  23.   this.htmlNumContainer=null;//页码的容器div  
  24.   this.htmlFirstPage=null//首页  
  25.   this.htmlPrvPage=null//上一页  
  26.   this.htmlNextPage=null//下一页  
  27.   this.htmlLastPage=null//尾页  
  28.   this.htmlPageNumContainer=null//页码集合的容器div  
  29.   this.htmlPageNum=null//所有页码的集合   
  30.   this.htmlTotalRecord=null//  
  31.   this.htmlPageSize=null;  
  32.   this.htmlTotalPage=null;  
  33.     
  34.   this.draw();  
  35.  }  
  36.   
  37.  PagerB.prototype={  
  38.   draw:function(){  
  39.   /* 
  40.   *页码的显示形式为: 
  41.   * <div id="pager"> 
  42.   * 共<span>300</span>行   
  43.   * 每页<span>20</span>行   
  44.   * 共<span>15</span>页 
  45.   * <div class="a"> 
  46.   * <span class="unUse">首页</span> 
  47.   * <span class="unUse">上一页</span> 
  48.   * <div class="b"> 
  49.   * <span class="cur">1</span> 
  50.   * <span class="use">2</span> 
  51.   * <span class="use">3</span> 
  52.   * </div> 
  53.   * <span class="use">下一页</span> 
  54.   * <span class="use">尾页</span> 
  55.   * </div> 
  56.   * </div>   
  57.   */  
  58.   var that=this;  
  59. var pageHtml='共<span>'+this.recordCount+'</span>行   '  
  60. +'每页<span>'+this.pageSize+'</span>行   '  
  61. +'共<span>'+this.totalPage+'</span>页   '  
  62. +"<div class='a' style='display:none'>"  
  63. +"<span>首页</span> "  
  64. +"<span>上一页</span> "  
  65. +"<div class='b' style='display:inline'>"  
  66. +this.setPageNum()  
  67. +"</div>"  
  68. +" <span>下一页</span>"  
  69. +" <span>尾页</span>"  
  70. +"</div>";  
  71. this.pageContainer.append(pageHtml);  
  72. this.htmlTotalRecord=$("span:eq(0)",this.pageContainer);  
  73. this.htmlPageSize=$("span:eq(1)",this.pageContainer);  
  74. this.htmlTotalPage=$("span:eq(2)",this.pageContainer);  
  75. this.htmlNumContainer=$(".a",this.pageContainer);  
  76. this.htmlFirstPage=$(".a > span:eq(0)",this.pageContainer);  
  77. this.htmlPrvPage=$(".a > span:eq(1)",this.pageContainer);   
  78. this.htmlNextPage=$(".a > span:eq(2)",this.pageContainer);  
  79. this.htmlLastPage=$(".a > span:eq(3)",this.pageContainer);  
  80. this.htmlPageNumContainer=$(".b",this.htmlNumContainer);  
  81. this.htmlPageNum=$("span",this.htmlPageNumContainer);  
  82. this.htmlFirstPage.click(function(){  
  83. if(that.currentPage!=1){  
  84. that.currentPage=1;  
  85. that.gotoPage();  
  86. }  
  87. });  
  88. this.htmlPrvPage.click(function(){  
  89. if(that.currentPage!=1){  
  90. that.currentPage--;  
  91. that.gotoPage();  
  92. }   
  93. });  
  94. this.htmlNextPage.click(function(){  
  95. if(that.currentPage!=that.totalPage){  
  96. that.currentPage++;  
  97. that.gotoPage();  
  98. }  
  99. });  
  100. this.htmlLastPage.click(function(){  
  101. if(that.currentPage!=that.totalPage){  
  102. that.currentPage=that.totalPage;  
  103. that.gotoPage();  
  104. }  
  105. });  
  106. if(this.totalPage>1){   
  107. this.htmlNumContainer.css("display","inline");   
  108. this.setStyle();  
  109. }  
  110. },  
  111.   setPageNum:function(){  
  112. //设置每页显示的页码,  
  113. //页码的显示取决与3个因素:  
  114. //1、每页显示的页码数量  
  115. //2、当前页  
  116. //3、总页数   
  117. var pageNumArray=[];  
  118. var firstNum=1,  
  119. lastNum=this.totalPage;  
  120.     
  121. //当总页数>每页显示的页数时才需要额外的处理     
  122. if(this.totalPage>this.pageNum){  
  123. var halfNum=Math.floor(this.pageNum/2);  
  124. firstNum=this.currentPage-halfNum;  
  125. if(firstNum<=0){  
  126. firstNum=1;  
  127. }else{  
  128. var isTotalPage=false;  
  129. while((firstNum+this.pageNum)>(this.totalPage+1)){  
  130. isTotalPage=true;  
  131. firstNum--;  
  132. }  
  133. }  
  134. if(isTotalPage){  
  135. lastNum=this.totalPage;  
  136. }else{  
  137. lastNum=firstNum+this.pageNum-1;  
  138. }   
  139. }     
  140. for(var i=firstNum;i<=lastNum;i++){  
  141. pageNumArray.push("<span>"+i+"</span>");  
  142. }   
  143. return pageNumArray.join(" ");  
  144. },  
  145. setStyle:function(){//设置显示的样式  
  146. var that=this;  
  147. if(this.currentPage!=1){  
  148. this.htmlFirstPage.css({cursor:"pointer",color:""}).removeClass("unUse").addClass("use");  
  149. this.htmlPrvPage.css({cursor:"pointer",color:""}).removeClass("unUse").addClass("use");  
  150. }else{  
  151. this.htmlFirstPage.css({cursor:"",color:"grey"}).removeClass("use").addClass("unUse");  
  152. this.htmlPrvPage.css({cursor:"",color:"grey"}).removeClass("use").addClass("unUse");  
  153. }  
  154.   
  155. if(this.currentPage!=this.totalPage){  
  156. this.htmlLastPage.css({cursor:"pointer",color:""}).removeClass("unUse").addClass("use");  
  157. this.htmlNextPage.css({cursor:"pointer",color:""}).removeClass("unUse").addClass("use");  
  158. }else{  
  159. this.htmlLastPage.css({cursor:"",color:"grey"}).removeClass("use").addClass("unUse");  
  160. this.htmlNextPage.css({cursor:"",color:"grey"}).removeClass("use").addClass("unUse");  
  161. }  
  162.   
  163. this.htmlPageNum.each(function(){  
  164. var pageNum=Number($(this).html());  
  165. if(that.currentPage!=pageNum){  
  166. $(this).css({cursor:"pointer",  
  167. textDecoration:"underline"  
  168. })  
  169. .click(function(){  
  170. that.currentPage=pageNum;  
  171. that.gotoPage();  
  172. })  
  173. .mouseover(function(){  
  174. $(this).css("color","green");  
  175. })  
  176. .mouseout(function(){  
  177. $(this).css("color","");  
  178. }).removeClass("cur").addClass("use");  
  179. }else{  
  180. $(this).css("color","blue").removeClass("use").addClass("cur");  
  181. }  
  182. });  
  183.   
  184. },  
  185. reDraw:function(_recordCount,_pageSize){  
  186. this.recordCount=_recordCount;  
  187. this.pageSize=_pageSize || this.pageSize;  
  188. this.currentPage=1;  
  189. this.totalPage=this.calculateTotalPage();  
  190. this.htmlTotalRecord.html(this.recordCount);  
  191.   this.htmlPageSize.html(this.pageSize);  
  192.   this.htmlTotalPage.html(this.totalPage);  
  193. if(this.totalPage>1){  
  194. this.htmlNumContainer.css("display","inline");  
  195. this.htmlPageNumContainer.html(this.setPageNum());  
  196. this.htmlPageNum=$("span",this.htmlPageNumContainer);  
  197. this.setStyle();  
  198. }else{  
  199. this.htmlNumContainer.css("display","none");  
  200. }  
  201. },     
  202.   calculateTotalPage:function(){//计算总页数  
  203. return Math.floor((this.recordCount+this.pageSize-1)/this.pageSize);  
  204. },  
  205. gotoPage:function(){  
  206. if(!this.sync){//异步时,需要更新组件的外观  
  207. this.htmlPageNumContainer.html(this.setPageNum());  
  208. this.htmlPageNum=$("span",this.htmlPageNumContainer);  
  209. this.setStyle();  
  210. }  
  211. this.funPageSearch(this.currentPage);  
  212. }  
  213.  };    
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页