jQuery实现一个表格的简单上下翻页

注：实现原理与轮播图相似。

html:

<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:;" class="prev">上一页</a>
        <a href="javascript:;" class="next">下一页</a>
    </p>
    <a href="javascript:;" 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代码：

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