Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi paging jadual?

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();