利用jQuery实现一个简单的表格上下翻页效果

<div class="popup day02-popup04">  <div class="group-caption">   <span>日期</span><span>参与团购场次</span><span class="result">团购结果</span><span>当前状态</span>  </div>  <table class="group-buying-table J_group_buying_table">   <tr><td>02.08</td><td>第一场</td><td>成功</td><td>现金券已发放</td></tr>   <tr><td>02.09</td><td>第二场</td><td>失败</td><td>G币已退回</td></tr>   <tr><td>02.10</td><td>第三场</td><td>团购中</td><td>团购中</td></tr>   <tr><td>02.11</td><td>第一场</td><td>成功</td><td>现金券已发放</td></tr>   <tr><td>02.12</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr>   <tr><td>02.13</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr>   <tr><td>02.14</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr>   <tr><td>02.15</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr>   <tr><td>02.16</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr>   <tr><td>02.17</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr>   <tr><td>02.18</td><td>第二场</td><td>成功</td><td>G币已退回</td></tr>   <tr><td>02.19</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr>   <tr><td>02.20</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr>   <tr><td>02.21</td><td>第二场</td><td>成功</td><td>团购中</td></tr>   <tr><td>02.22</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr>   <tr><td>02.23</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr>   <tr><td>02.24</td><td>第二场</td><td>成功</td><td>G币已退回</td></tr>   <tr><td>02.25</td><td>第二场</td><td>成功</td><td>现金券已发放</td></tr>  </table>  <p class="popup-page-btn">   <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="prev">上一页</a>   <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="next">下一页</a>  </p>  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="popup-close J_close"></a> </div> 

.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; } 

var i= 5, //每页显示的行数      len=$groupTable.find('tbody tr').length,//总行数      page= 1,        //起始页      maxPage=Math.ceil(len/i),    //总页数      $tbody=$groupTable.find('tbody'),  //容器      $scrollHeight=$groupTable.height();  //滚动距离     //下翻按钮     $(".next").click(function(e){      if(!$tbody.is(":animated")){       if(page == maxPage ){        $tbody.stop();       }else{        $tbody.animate({top : "-=" + $scrollHeight +"px"},800);        page++;       }      }     });     //上翻按钮     $(".prev").click(function(){      if(!$tbody.is(":animated")){       if(page == 1){        $tbody.stop();       }else{        $tbody.animate({top : "+=" + $scrollHeight +"px"},800);        page--;       }      }     });