利用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 相关文章推荐
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
js date 格式化
Feb 15 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
vue router 用户登陆功能的实例代码
Apr 24 Javascript
jQuery 动态粒子效果示例代码
Jul 07 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
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
angular.bind使用心得
2015/10/26 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
Python 字符串定义
2009/09/25 Python
python里对list中的整数求平均并排序
2014/09/12 Python
深入理解Javascript中的this关键字
2015/03/27 Python
Python中字典映射类型的学习教程
2015/08/20 Python
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
测绘工程专业个人自我评价
2013/12/01 职场文书
大学秋游活动方案
2014/02/11 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
母亲去世追悼词
2015/06/23 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle