本文共 970 字,大约阅读时间需要 3 分钟。
本文实例为大家分享了js实现表格滚动分页展示的具体代码,供大家参考,具体内容如下
DocumentMonthsMoney
January$100January$100January$100January$100January$100January$100January$100January$100January$100January$100CSS:
.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); //这里做第二页的数据请求并添加进表格
*/
}
});
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
转载地址:https://blog.csdn.net/weixin_33682804/article/details/117877104 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!