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

前言

本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果，注：实现原理与轮播图相似。下面话不多说，来看看详细的 实现方法吧。

html:

 
  
  日期参与团购场次团购结果当前状态 
  
 
 
  
02.08
第一场
成功
现金券已发放
 
  
02.09
第二场
失败
G币已退回
 
  
02.10
第三场
团购中
团购中
 
  
02.11
第一场
成功
现金券已发放
 
  
02.12
第二场
成功
现金券已发放
 
  
02.13
第二场
成功
现金券已发放
 
  
02.14
第二场
成功
现金券已发放
 
  
02.15
第二场
成功
现金券已发放
 
  
02.16
第二场
成功
现金券已发放
 
  
02.17
第二场
成功
现金券已发放
 
  
02.18
第二场
成功
G币已退回
 
  
02.19
第二场
成功
现金券已发放
 
  
02.20
第二场
成功
现金券已发放
 
  
02.21
第二场
成功
团购中
 
  
02.22
第二场
成功
现金券已发放
 
  
02.23
第二场
成功
现金券已发放
 
  
02.24
第二场
成功
G币已退回
 
  
02.25
第二场
成功
现金券已发放
 
 
 
 
 
  上一页 
  下一页 
 
 
  
 

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

总结

以上就是利用利用jQuery实现一个表格的简单上下翻页的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对考高分网的支持。