基于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数据类型
Mar 03 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
详解angular element()方法使用
Apr 08 Javascript
详解vue express启动数据服务
Jul 05 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
深入理解ES6之数据解构的用法
Jan 13 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 Javascript
vue监听dom大小改变案例
Jul 29 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
jQuery 获取URL参数的插件
2010/03/04 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
python实现SMTP邮件发送功能
2020/06/16 Python
使用python绘制常用的图表
2016/08/27 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
英国行业制服供应商:Alexandra
2019/09/14 全球购物
KTV的创业计划书范文
2014/02/02 职场文书
化妆品活动策划方案
2014/05/23 职场文书
世界读书日的活动方案
2014/08/20 职场文书
行政文员岗位职责
2015/02/04 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL