html把分页改成滚动条,基于JavaScript实现表格滚动分页

本文实例为大家分享了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); //这里做第二页的数据请求并添加进表格

*/

}

});

})

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