基于JavaScript实现表格滚动分页
程序员文章站
2022-03-20 21:45:58
本文实例为大家分享了js实现表格滚动分页展示的具体代码，供大家参考，具体内容如下
本文实例为大家分享了js实现表格滚动分页展示的具体代码，供大家参考，具体内容如下
<!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>
<div class="scroll-container">
<div 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>
</div>
</div>
</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); //这里做第二页的数据请求并添加进表格
*/
}
});
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。