利用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 相关文章推荐
javaScript对象和属性的创建方法
Jan 15 Javascript
JS 控制非法字符的输入代码
Dec 04 Javascript
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
Angular2安装angular-cli
May 21 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
让网站自动生成章节目录索引的多个js代码
Jan 07 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
基于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
ajax php 实现写入数据库
2009/09/02 PHP
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
起点页面传值js,有空研究学习下
2010/01/25 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
Python pass 语句使用示例
2014/03/11 Python
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
python selenium 弹出框处理的实现
2019/02/26 Python
python同步windows和linux文件
2019/08/29 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
python Gabor滤波器讲解
2020/10/26 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
换届选举主持词
2015/07/03 职场文书
Java使用HttpClient实现文件下载
2022/08/14 Java/Android