html静态表格分页怎么设置

在网页设计中,表格是展示数据的重要方式之一，而对于数据量较大的表格，分页显示就显得尤为重要，那么问题来了，如何给HTML静态表格实现分页功能呢？今天就来教大家一个简单易行的方法。

我们要创建一个基本的HTML表格,这里以一个简单的四列表格为例：

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
    <th>城市</th>
  </tr>
  <!-- 表格数据 -->
</table>

我们需要为表格添加分页功能,这里我们可以借助JavaScript来实现，以下是一个简单的分页实现步骤：

定义分页参数和函数：

var currentPage = 1; // 当前页
var pageSize = 5; // 每页显示的数据条数
function setPage() {
  // 获取表格数据
  var tableData = document.getElementById("myTable").getElementsByTagName("tr");
  var totalPage = Math.ceil((tableData.length - 1) / pageSize); // 总页数
  // 生成页码
  var pageHtml = '';
  for (var i = 1; i <= totalPage; i++) {
    pageHtml += '<span class="page-num" onclick="goPage(' + i + ')">' + i + '</span>';
  }
  document.getElementById("page").innerHTML = pageHtml;
  // 显示当前页数据
  goPage(1);
}
function goPage(page) {
  var tableData = document.getElementById("myTable").getElementsByTagName("tr");
  var startRow = (page - 1) * pageSize + 1;
  var endRow = page * pageSize;
  // 隐藏所有行
  for (var i = 1; i < tableData.length; i++) {
    tableData[i].style.display = "none";
  }
  // 显示当前页的行
  for (var i = startRow; i <= endRow && i < tableData.length; i++) {
    tableData[i].style.display = "";
  }
  // 更新当前页
  currentPage = page;
}

在HTML中添加分页显示区域和调用分页函数：

<div id="page"></div>
<script>
  setPage();
</script>

为表格添加一些样式,使其看起来更美观：

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
.page-num {
  display: inline-block;
  padding: 5px 10px;
  margin: 5px;
  border: 1px solid #ccc;
  cursor: pointer;
}

通过以上步骤,我们就成功为HTML静态表格添加了分页功能，这只是一个基础的实现，实际应用中，你可能还需要考虑以下方面：