jquery 分页

最新推荐文章于 2016-07-07 15:53:47 发布

Baple

最新推荐文章于 2016-07-07 15:53:47 发布

阅读量777

点赞数

分类专栏： JAVA C#/.NET WEB前端文章标签： jquery 分页

本文链接：https://blog.csdn.net/Baple/article/details/11669889

版权

JAVA 同时被 3 个专栏收录

282 篇文章 1 订阅

订阅专栏

C#/.NET

103 篇文章 2 订阅

订阅专栏

WEB前端

79 篇文章 0 订阅

订阅专栏

 
      <table width= 
      "100%"  
      border= 
      "1"  
      cellspacing= 
      "0"  
      cellpadding= 
      "0"  
      class= 
      "page" 
      > 
     
      <tr> 
     
      <th scope= 
      "col" 
      >&nbsp;</th> 
     
      <th scope= 
      "col" 
      >&nbsp;</th> 
     
      <th scope= 
      "col" 
      >&nbsp;</th> 
     
      </tr> 
     
      <tr> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      </tr> 
     
      <tr> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      </tr> 
     
      <tr> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      </tr> 
     
      <tr> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      </tr> 
     
      <tr> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      </tr> 
     
      <tr> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      </tr> 
     
      <tr> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      </tr> 
     
      <tr> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      </tr> 
     
      <tr> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      </tr> 
     
      <tr> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      </tr> 
     
      <tr> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      </tr> 
     
      <tr> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      </tr> 
     
      <tr> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      </tr> 
     
      <tr> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      </tr> 
     
      <tr> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      </tr> 
     
      <tr> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      </tr> 
     
      <tr> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      </tr> 
     
      <tr> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      </tr> 
     
      <tr> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      <td>&nbsp;</td> 
     
      </tr> 
     
      </table> 
     
      <div class= 
      "pagediv" 
      ></div> 
     
      <script type= 
      "text/javascript" 
      > 
     
      $( 
      function  
      () { 
     
      $( 
      'table.page' 
      ).each( 
      function  
      () { 
     
      var  
      currentPage = 0; 
     
      var  
      numPerPage = 6; 
     
      var  
      $table = $( 
      this 
      ); 
     
      var  
      pageFunction =  
      function  
      () { 
     
      $table.find( 
      'tbody tr' 
      ).show() 
     
      .slice(0, currentPage * numPerPage) 
     
      .hide() 
     
      .end() 
     
      .slice(((currentPage + 1) * numPerPage - 1) + 1) 
     
      .hide() 
     
      .end(); 
     
      }  
      //end of   pageFunction() 
     
      var  
      num_row = $table.find( 
      'tbody tr' 
      ).length; 
     
      var  
      num_pages = Math.ceil(num_row / numPerPage); 
     
      var  
      $pager = $( 
      '<div></div>' 
      ); 
     
      for  
      ( 
      var  
      i = 0; i < num_pages; i++) { 
     
      $( 
      '<span> 第'  
      + (i + 1) +  
      '页 </span>' 
      ) 
     
      .bind( 
      "click" 
      , {  
      'cssrain' 
      : i },  
      function  
      (event) { 
     
      currentPage = event.data[ 
      'cssrain' 
      ]; 
     
      pageFunction(); 
     
      $( 
      this 
      ).addClass( 
      'current' 
      ).siblings().removeClass( 
      'current' 
      ); 
     
      }) 
     
      .appendTo( 
      ".pagediv" 
      ); 
     
      } 
     
      $pager.insertBefore($table); 
     
      $pager.find( 
      "span:first" 
      ).addClass( 
      'current' 
      ); 
     
      pageFunction(); 
     
      }) 
      //end of each() 
     
      }) 
      //enf of function 
     
      </script>