利用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获取数组任意个不重复的随机数组元素
Mar 15 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
详解CocosCreator项目结构机制
Apr 14 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
基于PHP与XML的PDF文档生成技术
2006/10/09 PHP
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
python:print格式化输出到文件的实例
2018/05/14 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
python检测服务器端口代码实例
2019/08/31 Python
python实现单链表的方法示例
2019/09/03 Python
python实现堆排序的实例讲解
2020/02/21 Python
如何基于线程池提升request模块效率
2020/04/18 Python
python ETL工具 pyetl
2020/06/07 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
HTML5未来发展趋势
2016/02/01 HTML / CSS
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
SQL注入攻击的种类有哪些
2013/12/30 面试题
大学毕业后的十年规划
2014/01/07 职场文书
银行授权委托书格式
2014/10/10 职场文书
明确岗位职责
2015/02/14 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书