帮我用js写一个:table触底加载新数据
时间: 2024-06-10 13:07:19 浏览: 91
好的,以下是用JavaScript实现table触底加载新数据的代码:
HTML部分:
```
<table id="myTable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody id="myTableBody"></tbody>
</table>
```
JavaScript部分:
```
var pageNumber = 1; // 初始页数
var pageSize = 10; // 每页数据量
var tableBody = document.getElementById("myTableBody");
var table = document.getElementById("myTable");
// 窗口滚动事件,判断是否触底
window.addEventListener('scroll', function() {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
loadData();
}
});
// 加载数据函数
function loadData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var json = JSON.parse(xhr.responseText);
addDataToTable(json);
pageNumber++;
}
};
xhr.open('GET', 'https://example.com/getData?pageNumber=' + pageNumber + '&pageSize=' + pageSize, true);
xhr.send();
}
// 将新数据添加到表格中
function addDataToTable(json) {
var html = '';
for (var i = 0; i < json.length; i++) {
html += '<tr>';
html += '<td>' + json[i].id + '</td>';
html += '<td>' + json[i].name + '</td>';
html += '<td>' + json[i].age + '</td>';
html += '</tr>';
}
tableBody.innerHTML += html;
}
// 初始加载数据
loadData();
```
这样就可以实现table触底加载新数据啦!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)