基于JavaScript实现表格滚动分页

这篇文章主要为大家详细介绍了基于JavaScript实现表格滚动分页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现表格滚动分页展示的具体代码，供大家参考，具体内容如下

   Document      Months Money
  January $100
 January $100
 January $100
 January $100
 January $100
 January $100
 January $100
 January $100
 January $100
 January $100

Months	Money
January	$100
January	$100
January	$100
January	$100
January	$100
January	$100
January	$100
January	$100
January	$100
January	$100

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 = $(' good  nice  /tr>'); $('#scroll-tbody').append(tr); /* * pagination.page += 1; * dataAjax(pagination); //这里做第二页的数据请求并添加进表格 */ } }); })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持html中文网。

以上就是基于JavaScript实现表格滚动分页的详细内容，更多请关注0133技术站其它相关文章！