Of Stack

Using jQuery to realize a simple table page turning effect

  • 2021-08-03 09:20:27
  • OfStack

Preface

This paper mainly introduces the use of jQuery to achieve a simple table up and down page effect, Note: The implementation principle is similar to the carousel chart. Let's not say much below, let's take a look at the detailed implementation method.

html: 


<div class="popup day02-popup04"> 
 <div class="group-caption"> 
  <span> Date </span><span> Participate in group buying sessions </span><span class="result"> Group purchase result </span><span> Current status </span> 
 </div> 
 <table class="group-buying-table J_group_buying_table"> 
  <tr><td>02.08</td><td> No. 1 1 Field </td><td> Success </td><td> Cash coupons have been issued </td></tr> 
  <tr><td>02.09</td><td> No. 1 2 Field </td><td> Failure </td><td>G Currency has been returned </td></tr> 
  <tr><td>02.10</td><td> No. 1 3 Field </td><td> Group buying </td><td> Group buying </td></tr> 
  <tr><td>02.11</td><td> No. 1 1 Field </td><td> Success </td><td> Cash coupons have been issued </td></tr> 
  <tr><td>02.12</td><td> No. 1 2 Field </td><td> Success </td><td> Cash coupons have been issued </td></tr> 
  <tr><td>02.13</td><td> No. 1 2 Field </td><td> Success </td><td> Cash coupons have been issued </td></tr> 
  <tr><td>02.14</td><td> No. 1 2 Field </td><td> Success </td><td> Cash coupons have been issued </td></tr> 
  <tr><td>02.15</td><td> No. 1 2 Field </td><td> Success </td><td> Cash coupons have been issued </td></tr> 
  <tr><td>02.16</td><td> No. 1 2 Field </td><td> Success </td><td> Cash coupons have been issued </td></tr> 
  <tr><td>02.17</td><td> No. 1 2 Field </td><td> Success </td><td> Cash coupons have been issued </td></tr> 
  <tr><td>02.18</td><td> No. 1 2 Field </td><td> Success </td><td>G Currency has been returned </td></tr> 
  <tr><td>02.19</td><td> No. 1 2 Field </td><td> Success </td><td> Cash coupons have been issued </td></tr> 
  <tr><td>02.20</td><td> No. 1 2 Field </td><td> Success </td><td> Cash coupons have been issued </td></tr> 
  <tr><td>02.21</td><td> No. 1 2 Field </td><td> Success </td><td> Group buying </td></tr> 
  <tr><td>02.22</td><td> No. 1 2 Field </td><td> Success </td><td> Cash coupons have been issued </td></tr> 
  <tr><td>02.23</td><td> No. 1 2 Field </td><td> Success </td><td> Cash coupons have been issued </td></tr> 
  <tr><td>02.24</td><td> No. 1 2 Field </td><td> Success </td><td>G Currency has been returned </td></tr> 
  <tr><td>02.25</td><td> No. 1 2 Field </td><td> Success </td><td> Cash coupons have been issued </td></tr> 
 </table> 
 <p class="popup-page-btn"> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="prev"> Upper 1 Page </a> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="next"> Under 1 Page </a> 
 </p> 
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="popup-close J_close"></a> 
</div>

css: 


.day02-popup04 { 
 width: 708px; 
 height: 404px; } 
 .day02-popup04 .group-caption { 
 width: 594px; 
 margin: 30px auto 0; 
 border-top: 1px solid #ccc; 
 border-left: 1px solid #ccc; 
 border-bottom: 1px solid #ccc; } 
 .day02-popup04 .group-caption span { 
  width: 147.5px; 
  display: inline-block; 
  border-right: 1px solid #ccc; 
  text-align: center; 
  height: 50px; 
  line-height: 50px; 
  font-weight: 600; 
  font-size: 20px; } 
 .day02-popup04 .group-buying-table { 
 position: relative; 
 width: 594px; 
 margin: 0 auto; 
 height: 255px; 
 overflow: hidden; 
 border-collapse: collapse; } 
 .day02-popup04 .group-buying-table tbody { 
  position: absolute; 
  top: 0; } 
  .day02-popup04 .group-buying-table tbody tr { 
  height: 50px; 
  line-height: 50px; } 
  .day02-popup04 .group-buying-table tbody tr td { 
   width: 147px; 
   border-left: 1px solid #ccc; 
   border-right: 1px solid #ccc; 
   border-bottom: 1px solid #ccc; 
   text-align: center; 
   font-size: 18px; 
   color: #666; } 
 .day02-popup04 .popup-page-btn { 
 position: absolute; 
 width: 100%; 
 bottom: 0; 
 height: 66px; 
 line-height: 66px;} 
 .day02-popup04 .popup-page-btn a { 
  display: inline-block; 
  text-align: center; 
  width: 142px; 
  margin: 0 12px; 
  height: 42px; 
  line-height: 42px; 
  font-size: 20px; 
  color: #fff; 
  background-color: #bf3737; }

js code: 


var i= 5, // Number of rows displayed per page  
     len=$groupTable.find('tbody tr').length,// Total number of rows  
     page= 1,        // Start page  
     maxPage=Math.ceil(len/i),    // Total pages  
     $tbody=$groupTable.find('tbody'),  // Container  
     $scrollHeight=$groupTable.height();  // Rolling distance  
    // Flip down button  
    $(".next").click(function(e){ 
     if(!$tbody.is(":animated")){ 
      if(page == maxPage ){ 
       $tbody.stop(); 
      }else{ 
       $tbody.animate({top : "-=" + $scrollHeight +"px"},800); 
       page++; 
      } 
     } 
    }); 
    // Flip button  
    $(".prev").click(function(){ 
     if(!$tbody.is(":animated")){ 
      if(page == 1){ 
       $tbody.stop(); 
      }else{ 
       $tbody.animate({top : "+=" + $scrollHeight +"px"},800); 
       page--; 
      } 
     } 
    });

Summarize

Related articles: