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

前言

本文主要介绍的是利用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:;" 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> 

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实现一个表格的简单上下翻页的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。