html+js实现数据分页代码
时间: 2023-12-06 19:02:12 浏览: 27
以下是一个简单的HTML和JavaScript代码示例,用于实现数据分页:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据分页</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var currentPage = 1; // 当前页码
var pageSize = 10; // 每页显示的数据数量
var totalPage = 0; // 总页数
var totalCount = 0; // 总数据量
function loadData() {
// 模拟数据请求
var data = [];
for (var i = 1; i <= 100; i++) {
data.push({ id: i, name: "数据" + i });
}
// 计算总页数和总数据量
totalCount = data.length;
totalPage = Math.ceil(totalCount / pageSize);
// 显示当前页数据
var start = (currentPage - 1) * pageSize;
var end = start + pageSize;
var html = "";
for (var j = start; j < end && j < totalCount; j++) {
html += "<tr><td>" + data[j].id + "</td><td>" + data[j].name + "</td></tr>";
}
$("#dataList").html(html);
// 更新分页信息
$("#currentPage").text(currentPage);
$("#totalPage").text(totalPage);
$("#totalCount").text(totalCount);
}
$(function () {
loadData();
// 上一页按钮点击事件
$("#prevBtn").click(function () {
if (currentPage > 1) {
currentPage--;
loadData();
}
});
// 下一页按钮点击事件
$("#nextBtn").click(function () {
if (currentPage < totalPage) {
currentPage++;
loadData();
}
});
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>名称</th>
</tr>
</thead>
<tbody id="dataList"></tbody>
</table>
<div>
<button id="prevBtn">上一页</button>
<span>当前页:<span id="currentPage"></span></span>
<span>总页数:<span id="totalPage"></span></span>
<span>总数据量:<span id="totalCount"></span></span>
<button id="nextBtn">下一页</button>
</div>
</body>
</html>
```
这段代码会生成一个包含数据表格和分页按钮的页面,点击上一页或下一页按钮可实现数据分页。当每次按钮被点击时,会发起一个数据请求,获取对应页码的数据,并更新表格和分页信息。