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


Posted in Javascript onMarch 14, 2017

前言

本文主要介绍的是利用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实现一个表格的简单上下翻页的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
微信小程序实现分享商品海报功能
Sep 30 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 #Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 #Javascript
JS检测数组类型的方法小结
Mar 14 #Javascript
轻松理解JavaScript闭包
Mar 14 #Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 #Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 #Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 #Javascript
You might like
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
php fread读取文件注意事项
2016/09/24 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
JS中showModalDialog 的使用解析
2013/04/17 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
详解python中字典的循环遍历的两种方式
2017/02/07 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
python系列 文件操作的代码
2019/10/06 Python
python实现感知机模型的示例
2020/09/30 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
高中毕业自我鉴定
2013/12/13 职场文书
仓库组长岗位职责
2014/01/29 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
购房意向书
2014/08/30 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
高质量“欢迎词”
2019/04/03 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python