基于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 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
AngularJs分页插件使用详解
Jun 30 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+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
用jquery来定位
2007/02/20 Javascript
JS解密入门 最终变量劫持
2008/06/25 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
js实现分页功能
2017/05/24 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
python实现剪切功能
2019/01/23 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
Python requests模块cookie实例解析
2020/04/14 Python
python怎么删除缓存文件
2020/07/19 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
成龙洗发水广告词
2014/03/14 职场文书
人代会标语
2014/06/30 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
学校教师培训工作总结
2015/10/14 职场文书