利用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 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 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
用Socket发送电子邮件
2006/10/09 PHP
php中文字母数字验证码实现代码
2008/04/25 PHP
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
详解Vue中的自定义指令
2020/12/07 Vue.js
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
美国在线工具商店:Acme Tools
2018/06/26 全球购物
印度在线杂货店:bigbasket
2018/08/23 全球购物
计算机应用应届生求职信
2014/07/12 职场文书
毕业实习证明范本
2015/06/16 职场文书
运动会入场词
2015/07/18 职场文书
CentOS MySql8 远程连接实战
2022/04/19 MySQL
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers