怎么实现当用户点击分页组件时,JavaScript 代码可以根据当前页码来更新表格的数据
时间: 2024-05-07 22:17:20 浏览: 13
可以使用以下步骤来实现:
1. 给分页组件添加一个点击事件的监听器。
2. 在事件处理程序中,使用 JavaScript 获取当前被点击的页码。
3. 使用获取到的页码来查询数据,并将查询结果更新到表格中。
具体实现可以参考以下代码片段:
```javascript
// 给分页组件添加点击事件监听器
pagination.addEventListener('click', function (event) {
const currentPage = event.target.dataset.page; // 获取当前页码
// 使用页码查询数据再更新表格
fetch(`/data?page=${currentPage}`)
.then(response => response.json())
.then(data => updateTable(data));
});
// 更新表格的函数
function updateTable(data) {
// 清空表格原有数据
tableBody.innerHTML = '';
// 循环遍历新数据,并插入到表格中
data.forEach(item => {
const tr = document.createElement('tr');
tr.innerHTML = `<td>${item.id}</td><td>${item.name}</td><td>${item.age}</td>`;
tableBody.appendChild(tr);
});
}
```