博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

利用JQuery写一个简单的分页插件

Posted on 2009-04-19 13:07  linFen  阅读(927)  评论(0)  编辑  收藏  举报
  1. $.fn.mypagination = function(totalProperty,opts){   
  2.     opts = $.extend({   
  3.         perPage:10,   
  4.     
  5.         callback:function(){   
  6.         }   
  7.     },opts||{});   
  8.            
  9.     return this.each(function(){   
  10.         function numPages(){   
  11.             return Math.ceil(totalProperty/opts.perPage);   
  12.         }   
  13.     
  14.            
  15.         function selectPage(page){   
  16.             return function(){   
  17.                 currPage = page;   
  18.                 if (page<0) currPage = 0;   
  19.                 if (page>=numPages()) currPage = numPages()-1;   
  20.                 render();   
  21.     
  22.                 $('img.page-wait',panel).attr('src','images/wait.gif');   
  23.                 opts.callback(currPage+1);   
  24.                 $('img.page-wait',panel).attr('src','images/nowait.gif');   
  25.             }   
  26.         }   
  27.            
  28.         function render(){   
  29.     
  30.             var html = '<table><tbody><tr>'    
  31.                 +'<td><a href="#"><img class="page-first"></a></td>'  
  32.                 +'<td><a href="#"><img class="page-prev"></a></td>'  
  33.                 +'<td><span>第<input type="text" class="page-num">页/共'+numPages()+'页</span></td>'  
  34.                 +'<td><a href="#"><img class="page-next"></a></td>'  
  35.                 +'<td><a href="#"><img class="page-last"></a></td>'  
  36.                 +'<td><img src="images/nowait.gif" class="page-wait"></td>'  
  37.                 +'<td><span style="padding-left:50px;">检索到'+totalProperty+'记录</span></td>'  
  38.                 +'</tr></tbody></table>';   
  39.             var imgFirst = 'images/page-first-disabled.gif';   
  40.             var imgPrev = 'images/page-prev-disabled.gif';   
  41.             var imgNext = 'images/page-next-disabled.gif';   
  42.             var imgLast = 'images/page-last-disabled.gif';   
  43.             if (currPage > 0){   
  44.                 imgFirst = 'images/page-first.gif';   
  45.                 imgPrev = 'images/page-prev.gif';   
  46.             }   
  47.             if (currPage < numPages()-1){   
  48.                 imgNext = 'images/page-next.gif';   
  49.                 imgLast = 'images/page-last.gif';   
  50.             }   
  51.             panel.empty();   
  52.             panel.append(html);   
  53.             $('img.page-first',panel)   
  54.                 .bind('click',selectPage(0))   
  55.                 .attr('src',imgFirst);     
  56.             $('img.page-prev',panel)   
  57.                 .bind('click',selectPage(currPage-1))   
  58.                 .attr('src',imgPrev);      
  59.             $('img.page-next',panel)   
  60.                 .bind('click',selectPage(currPage+1))   
  61.                 .attr('src',imgNext);      
  62.             $('img.page-last',panel)   
  63.                 .bind('click',selectPage(numPages()-1))   
  64.                 .attr('src',imgLast);   
  65.             $('input.page-num',panel)   
  66.                 .val(currPage+1)   
  67.                 .change(function(){   
  68.                     selectPage($(this).val()-1)();   
  69.                 });   
  70.         }   
  71.            
  72.         var currPage = 0;   
  73.         var panel = $(this);   
  74.         render();   
  75.     
  76.     });   
  77. }  

 下面测试一下：

Html代码 复制代码
  1. <head>  
  2.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  3.     <link rel="stylesheet" href="mypagination.css"/>  
  4.     <script type="text/javascript" src="jquery-1.2.6.js"></script>  
  5.     <script type="text/javascript" src="jquery.mypagination.js"></script>  
  6.     <script>  
  7.         $(document).ready(function(){   
  8.             $('#mypage').mypagination(10112,{   
  9.                 callback:function(page){   
  10.                     alert(page);   
  11.                 }   
  12.             });   
  13.         });   
  14.     </script>  
  15. </head>  
  16. <div id="mypage" class="mypagination"></div>