基于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 相关文章推荐
jQuery 源代码显示控件 (Ajax加载方式).
May 18 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
JS创建对象的写法示例
Nov 04 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 Javascript
Javascript之datagrid查询详解
Sep 15 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&amp;mysql(三)
2006/10/09 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
laydate时间日历插件使用方法详解
2018/11/14 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
python3 enum模块的应用实例详解
2019/08/12 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
Python龙贝格法求积分实例
2020/02/29 Python
Python如何定义接口和抽象类
2020/07/28 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
职业生涯规划怎么写
2013/12/29 职场文书
九年级英语教学反思
2014/01/31 职场文书
财务总监管理职责范文
2014/03/09 职场文书
副总经理任命书
2014/06/05 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
MySQL数据库 任意ip连接方法
2022/05/20 MySQL
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python