HTML本身不支持
分页，但可以通过CSS和JavaScript来实现
表格分页。以下是一种实现方法：
1. 在HTML中，将整个
表格包含在一个div中，并设置其id为“table-wrapper”。
```html
<div id="table-wrapper">
<table>
<!--
表格内容 -->
</table>
</div>
```
2. 在CSS中，设置
表格外部div的高度和overflow属性，使其能够显示固定高度的内容，并添加
分页样式。
```css
#table-wrapper {
height: 400px; /* 设置
表格高度 */
overflow: auto; /* 显示
滚动条 */
}
/*
分页样式 */
.page-link {
display: inline-block;
padding: 5px;
border: 1px solid #ccc;
margin-right: 5px;
cursor: pointer;
}
.page-link.active {
background-color: #ccc;
color: #fff;
}
```
3. 在JavaScript中，根据每页显示的行数和总行数计算
分页数量，并添加
分页按钮。点击
分页按钮时，通过修改
表格的scrollTop属性来实现
表格滚动。
```javascript
var tableWrapper = document.getElementById('table-wrapper');
var table = tableWrapper.querySelector('table');
var rowsPerPage = 10; // 每页显示的行数
var totalRows = table.rows.length - 1; // 总行数（减去表头）
var totalPages = Math.ceil(totalRows / rowsPerPage); //
分页数量
// 添加
分页按钮
for (var i = 1; i <= totalPages; i++) {
var pageLink = document.createElement('span');
pageLink.classList.add('page-link');
pageLink.innerText = i;
pageLink.dataset.page = i;
pageLink.addEventListener('click',
function() {
var page = parseInt(this.dataset.page);
var scrollTop = (page - 1) * rowsPerPage * table.rows[1].offsetHeight; // 计算scrollTop
tableWrapper.scrollTop = scrollTop;
updatePageLinks(page); // 更新
分页按钮样式
});
tableWrapper.parentNode.insertBefore(pageLink, tableWrapper.nextSibling);
}
// 更新
分页按钮样式
function updatePageLinks(activePage) {
var pageLinks = tableWrapper.parentNode.querySelectorAll('.page-link');
for (var i = 0; i < pageLinks.length; i++) {
var page = parseInt(pageLinks[i].dataset.page);
pageLinks[i].classList.toggle('active', page === activePage);
}
}
```
这样就可以实现
表格分页功能了。需要注意的是，如果
表格中有跨行或跨列的单元格，会影响
分页的计算和渲染。
扫一扫
476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
