本文主要为大家详细介绍了基于javascript实现表格滚动分页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link href="./scroll.css" rel="external nofollow" rel="stylesheet" />
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="./scroll.js"></script>
<title>document</title>
</head>
<body>
<p class="scroll-container">
<p class="scroll-body">
<table id="scroll-table">
<thead>
<tr>
<th>months</th>
<th>money</th>
</tr>
</thead>
<tbody id="scroll-tbody">
<tr>
<td>january</td>
<td>$100</td>
</tr>
<tr>
<td>january</td>
<td>$100</td>
</tr>
<tr>
<td>january</td>
<td>$100</td>
</tr>
<tr>
<td>january</td>
<td>$100</td>
</tr>
<tr>
<td>january</td>
<td>$100</td>
</tr>
<tr>
<td>january</td>
<td>$100</td>
</tr>
<tr>
<td>january</td>
<td>$100</td>
</tr>
<tr>
<td>january</td>
<td>$100</td>
</tr>
<tr>
<td>january</td>
<td>$100</td>
</tr>
<tr>
<td>january</td>
<td>$100</td>
</tr>
</tbody>
</table>
</p>
</p>
</body>
</html>
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 = $('<tr><td> good </td> <td> nice </td> /tr>');
$('#scroll-tbody').append(tr);
/*
* pagination.page += 1;
* dataajax(pagination); //这里做第二页的数据请求并添加进表格
*/
}
});
})
相关推荐：
php后台表格分页功能的实现方法
js表格分页实现代码_javascript技巧
angularjs表格分页功能详解_angularjs
以上就是javascript实现表格滚动分页教程的详细内容。