基于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与函数式编程解释
Apr 27 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
Vue3.0数据响应式原理详解
Oct 09 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 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将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
python写xml文件的操作实例
2014/10/05 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
python datetime中strptime用法详解
2019/08/29 Python
Python和Sublime整合过程图示
2019/12/25 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
美国折扣网站:jClub
2017/08/07 全球购物
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
文员自我评价怎么写
2013/09/19 职场文书
学校三节实施方案
2014/06/09 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
2014年采购工作总结
2014/11/20 职场文书
大学生操行评语大全
2014/12/31 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
北京爱情故事观后感
2015/06/12 职场文书
领导干部学习心得体会
2016/01/23 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
详解pytorch创建tensor函数
2022/03/22 Python