基于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 switch case 另类写法
Mar 14 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 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
基于MySQL体系结构的分析
2013/05/02 PHP
php封装的page分页类完整实例
2016/10/18 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
Python实现端口复用实例代码
2014/07/03 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
python 不以科学计数法输出的方法
2018/07/16 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
工商学院毕业生个人自我评价
2013/09/19 职场文书
新闻专业个人求职信
2013/12/19 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
优良学风班总结材料
2014/02/08 职场文书
护士毕业实习感言
2014/03/05 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
先进工作者个人总结
2015/02/15 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
检讨书格式范文
2015/05/07 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
公司费用报销管理制度
2015/08/04 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python