html把分页改成滚动条,基于JavaScript实现表格滚动分页
发布日期:2021-06-24 15:58:34 浏览次数:3 分类:技术文章

本文共 970 字,大约阅读时间需要 3 分钟。

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

Document

MonthsMoney

January$100January$100January$100January$100January$100January$100January$100January$100January$100January$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); //这里做第二页的数据请求并添加进表格

*/

}

});

})

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

转载地址:https://blog.csdn.net/weixin_33682804/article/details/117877104 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:html tab顶部吸附,浅谈react.js中实现tab吸顶效果的问题
下一篇:flask 动态模板html,Flask:呈现模板并填充HTML选项卡

发表评论

最新留言

第一次来,支持一个
[***.219.124.196]2024年04月27日 01时20分22秒