以下是一个简单的
HTML 分页显示数据的代码示例：
```
html
<!DOCTYPE
html>
<
html>
<head>
<title>分页</title>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody id="data">
<!-- 数据将通过 JavaScript 动态加载 -->
</tbody>
</table>
<div id="pagination">
<!-- 分页按钮将通过 JavaScript 动态添加 -->
</div>
<script>
var currentPage = 1; // 当前页面
var pageSize = 10; // 每页显示的数量
// 模拟的数据
var data = [
{ name: '张三', age: 20, gender: '男' },
{ name: '李四', age: 25, gender: '女' },
{ name: '王五', age: 30, gender: '男' },
{ name: '赵六', age: 35, gender: '女' },
{ name: '钱七', age: 40, gender: '男' },
{ name: '孙八', age: 45, gender: '女' },
{ name: '周九', age: 50, gender: '男' },
{ name: '吴十', age: 55, gender: '女' },
{ name: '郑十一', age: 60, gender: '男' },
{ name: '陈十二', age: 65, gender: '女' },
{ name: '黄十三', age: 70, gender: '男' },
{ name: '林十四', age: 75, gender: '女' },
{ name: '郭十五', age: 80, gender: '男' },
{ name: '何十六', age: 85, gender: '女' },
{ name: '唐十七', age: 90, gender: '男' },
{ name: '许十八', age: 95, gender: '女' },
{ name: '冯十九', age: 100, gender: '男' },
{ name: '任二十', age: 105, gender: '女' }
];
// 加载指定页数的数据
function loadData(page) {
var start = (page - 1) * pageSize;
var end = start + pageSize;
var
html = '';
for (var i = start; i < end && i < data.length; i++) {
html += '<tr>';
html += '<td>' + data[i].name + '</td>';
html += '<td>' + data[i].age + '</td>';
html += '<td>' + data[i].gender + '</td>';
html += '</tr>';
}
document.getElementById('data').inner
HTML =
html;
}
// 初始化分页按钮
function initPagination() {
var totalPages = Math.ceil(data.length / pageSize);
var
html = '';
for (var i = 1; i <= totalPages; i++) {
html += '<button onclick="changePage(' + i + ')">' + i + '</button>';
}
document.getElementById('pagination').inner
HTML =
html;
}
// 切换分页
function changePage(page) {
currentPage = page;
loadData(currentPage);
}
// 初始化页面
loadData(currentPage);
initPagination();
</script>
</body>
</
html>
```
该示例中，我们使用了一些简单的 JavaScript 代码来
实现分页。我们先定义了一个 `data` 数组，其中包含了 20 条学生信息，然后定义了 `currentPage` 和 `pageSize` 变量来表示当前页码和每页显示的数量。在 `loadData` 函数中，我们通过计算开始和结束索引来加载指定页数的数据，并将其渲染到表格中。在 `initPagination` 函数中，我们通过计算总页数来初始化分页按钮，并在点击按钮时切换分页。最后，在页面加载时，我们调用 `loadData` 和 `initPagination` 函数来初始化页面。
最低0.47元/天 解锁文章
3887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
