基于JavaScript实现表格滚动分页


Posted in Javascript onNovember 22, 2017

本文实例为大家分享了js实现表格滚动分页展示的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="./scroll.css" rel="external nofollow" rel="stylesheet" />
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
  <script src="./scroll.js"></script>
  <title>Document</title>
</head>
<body>
  <div class="scroll-container">
    <div class="scroll-body">
      <table id="scroll-table">
        <thead>
          <tr>
            <th>Months</th>
            <th>Money</th>
          </tr>
        </thead>
        <tbody id="scroll-tbody">
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
        </tbody>      
      </table>
    </div>
  </div>
</body>
</html>

CSS:

.scroll-body{
 display: inline-block;
}
.scroll-container{
 text-align: center;
}
#scroll-table{
 border: 1px solid;
 border-collapse: collapse;
 width: 200px;
 height: 200px;
 overflow: auto;
 display: block;
}

JS:

$(function () {
 $('#scroll-table').scroll(function (e) {
  var pagination = {
   page: 0,
   pageSize: 20
  };
  //滚动条位置 
  var scrollTop = $('#scroll-table').scrollTop();

  //可视窗口的高度 
  var viewportHeight = $('#scroll-table').height();

  //整个页面可以滚动的高度 
  var scrollHeight = $('#scroll-table')[0].scrollHeight;

  //“如果滚动条的位置”+“可视窗口的高度”=“整个页面可以滚动的高度”,那么就调用相应的函数加载数据 
  if (Math.round(scrollTop + viewportHeight) == scrollHeight) {
   var tr = $('<tr><td> good </td> <td> nice </td> /tr>');
   $('#scroll-tbody').append(tr);

   /*
    * pagination.page += 1;
    * dataAjax(pagination); //这里做第二页的数据请求并添加进表格 
    */
  }
 });
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
图片上传即时显示缩略图的js代码
May 27 Javascript
javascript Array对象基础知识小结
Nov 16 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 #Javascript
Vue官方文档梳理之全局配置
Nov 22 #Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 #Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 #Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 #Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 #Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 #Javascript
You might like
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
layerUI下的绑定事件实例代码
2018/08/17 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
八大排序算法的Python实现
2021/01/28 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
Python图像读写方法对比
2020/11/16 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
学习心得体会
2014/01/01 职场文书
海飞丝的广告词
2014/03/20 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
美化环境标语
2014/06/20 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
会计简历自我评价
2015/03/10 职场文书
2015年生活老师工作总结
2015/05/27 职场文书