时间:2021-05-25
本文实例为大家分享了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); //这里做第二页的数据请求并添加进表格 */ } });})以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了Android基于ListView实现类似Market分页加载效果。分享给大家供大家参考,具体如下:最近几天研究ListView实现分页加载和滚动
本文实例为大家分享了javascript实现前端分页效果的具体代码,供大家参考,具体内容如下需求:实现分页请求表格数据,ajax暂时没写,只写了分页的功能。效果
本文实例讲述了JS基于封装函数实现的表格分页。分享给大家供大家参考,具体如下:HTML代码:www.jb51.netjs表格分页#idData{color:re
本文实例讲述了JavaScript仿静态分页实现方法。分享给大家供大家参考。具体如下:这里基于JavaScript模仿网页不刷新静态分页的功能,实际用的时候估计
本文实例讲解了基于jquery实现表格无刷新分页功能,分享给大家供大家参考,具体内容如下效果图:具体代码:面向对象的无刷新表格分页vardata=[];for(