数据表可见显示条目 - JavaScript

在 web 应用程序中，常常需要通过数据表的形式来展示数据，但有时候数据量太大，一次性展示所有数据会影响网页的性能。此时需要将数据表分页，并提供可见的显示条目，以便用户能够快速导航到目标数据。

如何实现

以下是一个使用JavaScript实现的可见显示条目的示例代码：

const table = document.getElementById('table');
const itemsPerPage = 10; // 每页显示10条数据
let currentPage = 1; // 当前页数，默认为第一页

function showPage(page) {
  const startIndex = (page - 1) * itemsPerPage; // 计算当前页的起始索引
  const endIndex = startIndex + itemsPerPage; // 计算当前页的结束索引
  const rows = table.getElementsByTagName('tr'); // 获取表格的所有行

  // 遍历表格的所有行，根据索引值来设置每一行的显示状态
  for (let i = 1; i < rows.length; i++) { // 忽略表头行
    if (i < startIndex || i >= endIndex) {
      rows[i].style.display = 'none'; // 不在当前页范围内的行设为隐藏
    } else {
      rows[i].style.display = ''; // 在当前页范围内的行设为显示
    }
  }
}

// 绑定事件监听器，当用户点击翻页按钮时触发
document.getElementById('prevPageBtn').addEventListener('click', () => {
  if (currentPage > 1) {
    currentPage--;
    showPage(currentPage);
  }
});

document.getElementById('nextPageBtn').addEventListener('click', () => {
  const totalPage = Math.ceil((table.rows.length - 1) / itemsPerPage); // 计算总页数，需排除表头行
  if (currentPage < totalPage) {
    currentPage++;
    showPage(currentPage);
  }
});

// 初始化，展示第一页
showPage(currentPage);

以上是一个基于DOM操作的实现方式。当用户点击“上一页”或“下一页”按钮时，程序会计算当前页的起始索引和结束索引，并将不在此范围内的行设为隐藏，而显示范围内的行则设为显示。在初始加载时，程序会默认显示第一页。可以通过调整 itemsPerPage 常量的值来调整每页显示的数据量。

总结

以上是实现数据表可见显示条目的一个示例，开发者可以根据自己的具体需求进行调整和完善。在实际开发中，除了以上DOM操作的方式外，还可以使用一些流行的前端框架（如React、Vue等）来快速搭建数据表格及翻页功能。