html表格分页代码实例
时间: 2023-09-24 18:05:40 浏览: 53
以下是一个简单的 HTML 表格分页代码实例：
```html
<!DOCTYPE html>
<html>
<head>
<title>Table Pagination Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
.active {
background-color: #4CAF50;
color: white;
}
.disabled {
background-color: #ddd;
color: #aaa;
cursor: not-allowed;
}
</style>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>25</td>
</tr>
<tr>
<td>Bob</td>
<td>Smith</td>
<td>40</td>
</tr>
<tr>
<td>Susan</td>
<td>Johnson</td>
<td>35</td>
</tr>
<tr>
<td>David</td>
<td>Williams</td>
<td>50</td>
</tr>
<tr>
<td>Alice</td>
<td>Brown</td>
<td>45</td>
</tr>
</tbody>
</table>
<div id="pagination">
<button id="prevBtn" class="disabled">« Prev</button>
<button id="page1" class="active">1</button>
<button id="page2">2</button>
<button id="nextBtn">» Next</button>
</div>
<script>
var table = document.getElementById("myTable");
var prevBtn = document.getElementById("prevBtn");
var nextBtn = document.getElementById("nextBtn");
var page1Btn = document.getElementById("page1");
var page2Btn = document.getElementById("page2");
var rowsPerPage = 2;
var currentPage = 1;
function showPage(page) {
var rows = table.rows;
// Hide all rows
for (var i = 1; i < rows.length; i++) {
rows[i].style.display = "none";
}
// Show the rows for the current page
for (var i = (page - 1) * rowsPerPage + 1; i < page * rowsPerPage + 1 && i < rows.length; i++) {
rows[i].style.display = "table-row";
}
// Update active page button
page1Btn.classList.remove("active");
page2Btn.classList.remove("active");
if (page == 1) {
page1Btn.classList.add("active");
} else {
page2Btn.classList.add("active");
}
// Disable/enable prev and next buttons
if (page == 1) {
prevBtn.classList.add("disabled");
} else {
prevBtn.classList.remove("disabled");
}
if (page == Math.ceil(rows.length / rowsPerPage)) {
nextBtn.classList.add("disabled");
} else {
nextBtn.classList.remove("disabled");
}
// Update current page variable
currentPage = page;
}
// Show the first page on page load
showPage(1);
// Add event listeners to prev and next buttons
prevBtn.addEventListener("click", function() {
if (currentPage > 1) {
showPage(currentPage - 1);
}
});
nextBtn.addEventListener("click", function() {
if (currentPage < Math.ceil(table.rows.length / rowsPerPage)) {
showPage(currentPage + 1);
}
});
// Add event listeners to page buttons
page1Btn.addEventListener("click", function() {
showPage(1);
});
page2Btn.addEventListener("click", function() {
showPage(2);
});
</script>
</body>
</html>
```
在这个例子中，我们创建了一个包含 6 行数据的表格，每页显示 2 行。我们还添加了两个分页按钮和两个数字按钮，用于控制表格的显示。我们使用 JavaScript 动态地显示和隐藏行，并更新分页按钮的状态。
相关推荐
最新推荐
Bootstrap官网教程整理
Bootstrap 代码 41 实例 41 Bootstrap 表格 43 基本的表格 43 可选的表格类 44 上下文类 50 响应式表格 52 Bootstrap 表单 54 表单布局 54 支持的表单控件 58 静态控件 63 表单控件状态 64 表单控件大小 67 表单帮助...
pre_o_1csdn63m9a1bs0e1rr51niuu33e.a
pre_o_1csdn63m9a1bs0e1rr51niuu33e.a
matlab建立计算力学课程的笔记和文件.zip
matlab建立计算力学课程的笔记和文件.zip
FT-Prog-v3.12.38.643-FTD USB 工作模式设定及eprom读写
FT_Prog_v3.12.38.643--FTD USB 工作模式设定及eprom读写
matlab基于RRT和人工势场法混合算法的路径规划.zip
matlab基于RRT和人工势场法混合算法的路径规划.zip
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
2． 通过python绘制y=e-xsin(2πx)图像
可以使用matplotlib库来绘制这个函数的图像。以下是一段示例代码：
```python
import numpy as np
import matplotlib.pyplot as plt
def func(x):
return np.exp(-x) * np.sin(2 * np.pi * x)
x = np.linspace(0, 5, 500)
y = func(x)
plt.plot(x, y)
plt.xlabel('x')
plt.ylabel('y')
plt.title('y = e^{-x} sin(2πx)')
plt.show()
```
运行这段
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。