写的一个jquery小分页插件，类似aspnetpager的用法

 

 

  1  /*
  2  -- =============================================
  3  -- Author:        <yyliuliang@gmail.com>
  4  -- Create date: <2008-12>
  5  -- =============================================
  6  */
  7  ( function ($) {
  8 
  9      $.fn.pager  =   function (recordCount, options) {
 10 
 11           var  defaults  =  {
 12               // 只有一页时是否仍然显示
 13              alwaysShow:  true ,
 14              width:  ' 95% ' ,
 15              currentPageIndex:  1 ,
 16              pageSize:  10 ,
 17               // button or number
 18              pagerStyle:  ' button ' ,
 19              onPageIndexChanged:  function () { }
 20          };
 21           var  parent  =   this ;
 22           var  props  =  $.extend(defaults, options);
 23           var  pageCount  =  Math.ceil((recordCount  /  props.pageSize));
 24 
 25           // 当数据不满一页时，是否显示pager
 26           if  (recordCount  >  props.pageSize  ||  props.alwaysShow) {
 27               var  text  =   " <table width=' "   +  props.width  +   " '><tr><td align='left'> " ;
 28 
 29              text  +=   ' 记录数: '   +  recordCount  +   "  页数: "   +  props.currentPageIndex  +   " / "   +  pageCount  +   "  每页 "   +  props.pageSize  +   " 条 " ;
 30              text  +=   " </td><td align='right'>  " ;
 31               if  (props.pagerStyle  ===   ' button ' ) {
 32                  text  +=   " <a id='pagerfirst'>首页</a>  " ;
 33                  text  +=   " <a id='pagerprev'>上页</a>  " ;
 34                  text  +=   " <a id='pagernext'>下页</a>  " ;
 35                  text  +=   " <a id='pagerlast'>末页</a>  " ;
 36              }
 37 
 38               if  (props.pagerStyle  ===   ' number ' ) {
 39                   // /TODO
 40              }
 41 
 42              text  +=   " <input id='pagernumber' style='width:18px;font-size:11px' /><input type='button' value='GO' style='width:22px;font-size:11px' id='pagerbutton' /> " ;
 43              text  +=   " </td></tr></table> " ;
 44 
 45               this .html(text);
 46 
 47              $( ' #pagernumber ' ).val(props.currentPageIndex);
 48 
 49 
 50              $( ' #pagerbutton ' ).click( function () {
 51                   var  i  =  $( ' #pagernumber ' ).val();
 52                   if  (i  <   1   ||  i  >  pageCount  ||   ! / ^\d+$ / .test(i)) {
 53                      alert( ' 请输入正确的页数 ' );
 54                       return   false ;
 55                  }
 56                  props.currentPageIndex  =  i;
 57                  raisePageIndexChangedEvent(i);
 58              });
 59 
 60               if  (props.currentPageIndex  >   1 ) {
 61 
 62                  $( ' #pagerfirst ' ).attr( ' href ' , ' javascript:void(0); ' ).click( function () {                    
 63                          raisePageIndexChangedEvent( 1 );
 64                  });
 65 
 66                  $( ' #pagerprev ' ).attr( ' href ' , ' javascript:void(0); ' ).click( function () {                    
 67                          raisePageIndexChangedEvent( -- props.currentPageIndex);
 68                  });
 69              }
 70               else  {
 71                  $( ' #pagerfirst ' ).css({ ' color ' : ' gray ' , ' text-decoration ' : ' none ' });
 72                  $( ' #pagerprev ' ).css({ ' color ' : ' gray ' , ' text-decoration ' : ' none ' });
 73              }
 74 
 75               if  (props.currentPageIndex  <  pageCount) {
 76                  $( ' #pagernext ' ).attr( ' href ' , ' javascript:void(0); ' ).click( function () {                    
 77                          raisePageIndexChangedEvent( ++ props.currentPageIndex);
 78                  });
 79 
 80                  $( ' #pagerlast ' ).attr( ' href ' , ' javascript:void(0); ' ).click( function () {
 81                          raisePageIndexChangedEvent(pageCount);
 82                  });
 83              }
 84               else  {
 85                  $( ' #pagernext ' ).css({ ' color ' : ' gray ' , ' text-decoration ' : ' none ' });
 86                  $( ' #pagerlast ' ).css({ ' color ' : ' gray ' , ' text-decoration ' : ' none ' });
 87              }
 88 
 89          }
 90 
 91           function  render() {
 92          }
 93 
 94 
 95           function  raisePageIndexChangedEvent(pageIndex) {
 96              props.onPageIndexChanged(pageIndex);
 97          }
 98      };
 99 
100  })(jQuery);

美化方面可以自己改一改的

附带一个结合jquery-jtemplates使用的小例子 下载点这里

 

 

 

转载于:https://www.cnblogs.com/yyliuliang/archive/2008/12/20/1358778.html