好资源导航 » 文章资讯 » 基于JavaScript实现表格滚动分页

基于JavaScript实现表格滚动分页

2023-09-20 16:00:06 54

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










Document







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:1pxsolid;
border-collapse:collapse;
width:200px;
height:200px;
overflow:auto;
display:block;
}

JS:

$(function(){
$('#scroll-table').scroll(function(e){
varpagination={
page:0,
pageSize:20
};
//滚动条位置
varscrollTop=$('#scroll-table').scrollTop();

//可视窗口的高度
varviewportHeight=$('#scroll-table').height();

//整个页面可以滚动的高度
varscrollHeight=$('#scroll-table')[0].scrollHeight;

//“如果滚动条的位置”+“可视窗口的高度”=“整个页面可以滚动的高度”，那么就调用相应的函数加载数据
if(Math.round(scrollTop+viewportHeight)==scrollHeight){
vartr=$('goodnice/tr>');
$('#scroll-tbody').append(tr);

/*
*pagination.page+=1;
*dataAjax(pagination);//这里做第二页的数据请求并添加进表格
*/
}
});
})

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

返回顶部
514930285
czq8825@qq.com

基于JavaScript实现表格滚动分页

热门推荐

随机推荐