基于JavaScript实现表格滚动分页
时间:2019-04-10
本文章向大家介绍基于JavaScript实现表格滚动分页,主要包括基于JavaScript实现表格滚动分页使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了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); //这里做第二页的数据请求并添加进表格 */ } }); })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Linux用户管理
- Linux权限管理
- 大白话 Promise,这到底是干啥用的?
- Make
- perf ,比较好的一个程序性能测试工具
- Linux shell 程序设计5——shell中一些特殊符号的用法总结
- Linux shell 程序设计4——shell变量
- 基于CallContextInitializer的WCF扩展导致的严重问题
- 1228-redux学习笔记(摘录) | WEB前端零基础课
- 在fedora下使用搜狗拼音输入法
- 一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例)
- 【1120-WEB零基础课】| 单例模式,下周要讲
- 使用gerrit作为代码评审工具
- 如何重构你的时间序列预测问题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python 使用多线程创建一个Buffer缓存器的实现思路
- keras.utils.to_categorical和one hot格式解析
- Python OpenCV读取中文路径图像的方法
- Java如何基于wsimport调用wcf接口
- Python装饰器结合递归原理解析
- Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
- 浅谈keras通过model.fit_generator训练模型(节省内存)
- PHP实现通过文本文件统计页面访问量功能示例
- 解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
- python里的单引号和双引号的有什么作用
- 在PHP中输出JS语句以及乱码问题的解决方案
- 使用Keras中的ImageDataGenerator进行批次读图方式
- php用xpath解析html的代码实例讲解
- PHP操作路由器实现方法示例
- python能在浏览器能运行吗