如何使用 JavaScript 實作表格分頁功能？

var table = document.getElementById("myTable"); // 表格
var tbody = table.getElementsByTagName("tbody")[0]; // 表格的 tbody 元素
var rowsPerPage = 10; // 每页显示的行数
var currentPage = 0; // 当前页码
var totalPages = Math.ceil(tbody.rows.length / rowsPerPage); // 总页数
var pagination = document.getElementById("pagination"); // 分页按钮的容器

function displayPage(page) {
  // 清空表格
  while (tbody.firstChild) {
    tbody.removeChild(tbody.firstChild);
  }

  // 计算起始行和结束行的索引
  var startIndex = page * rowsPerPage;
  var endIndex = Math.min(startIndex + rowsPerPage, tbody.rows.length);

  // 将指定页码的数据添加到表格中
  for (var i = startIndex; i < endIndex; i++) {
    tbody.appendChild(tbody.rows[i].cloneNode(true));
  }
}

function createPagination() {
  // 清空分页按钮
  while (pagination.firstChild) {
    pagination.removeChild(pagination.firstChild);
  }

  // 添加上一页按钮
  var previousButton = document.createElement("button");
  previousButton.innerText = "上一页";
  previousButton.onclick = function() {
    currentPage = Math.max(currentPage - 1, 0);
    displayPage(currentPage);
  };
  pagination.appendChild(previousButton);

  // 添加页码按钮
  for (var i = 0; i < totalPages; i++) {
    var pageButton = document.createElement("button");
    pageButton.innerText = i + 1;
    pageButton.onclick = function() {
      currentPage = parseInt(this.innerText) - 1;
      displayPage(currentPage);
    };
    pagination.appendChild(pageButton);
  }

  // 添加下一页按钮
  var nextButton = document.createElement("button");
  nextButton.innerText = "下一页";
  nextButton.onclick = function() {
    currentPage = Math.min(currentPage + 1, totalPages - 1);
    displayPage(currentPage);
  };
  pagination.appendChild(nextButton);
}

displayPage(currentPage);
createPagination();

var table = document.getElementById("myTable");
var tbody = table.getElementsByTagName("tbody")[0];
var rowsPerPage = 10;
var currentPage = 0;
var totalPages = Math.ceil(tbody.rows.length / rowsPerPage);
var pagination = document.getElementById("pagination");

function displayPage(page) {
  while (tbody.firstChild) {
    tbody.removeChild(tbody.firstChild);
  }

  var startIndex = page * rowsPerPage;
  var endIndex = Math.min(startIndex + rowsPerPage, tbody.rows.length);

  for (var i = startIndex; i < endIndex; i++) {
    tbody.appendChild(tbody.rows[i].cloneNode(true));
  }
}

function createPagination() {
  while (pagination.firstChild) {
    pagination.removeChild(pagination.firstChild);
  }

  var previousButton = document.createElement("button");
  previousButton.innerText = "上一页";
  previousButton.onclick = function() {
    currentPage = Math.max(currentPage - 1, 0);
    displayPage(currentPage);
  };
  pagination.appendChild(previousButton);

  for (var i = 0; i < totalPages; i++) {
    var pageButton = document.createElement("button");
    pageButton.innerText = i + 1;
    pageButton.onclick = function() {
      currentPage = parseInt(this.innerText) - 1;
      displayPage(currentPage);
    };
    pagination.appendChild(pageButton);
  }

  var nextButton = document.createElement("button");
  nextButton.innerText = "下一页";
  nextButton.onclick = function() {
    currentPage = Math.min(currentPage + 1, totalPages - 1);
    displayPage(currentPage);
  };
  pagination.appendChild(nextButton);
}

displayPage(currentPage);
createPagination();