如何编写一个高效分页功能的JavaScript代码？

分页功能是网站和应用程序中常见的需求，它可以帮助用户更方便地浏览大量数据，以下是一个简单的分页JavaScript代码示例，该代码适用于HTML表格,并且能够实现基本的分页功能。

// 假设有一个HTML表格，其ID为"myTable" // 表格中的数据行数量为894行 // 定义每页显示的行数 var rowsPerPage = 10; // 获取表格元素 var table = document.getElementById("myTable"); // 计算总页数 var totalPages = Math.ceil(table.rows.length / rowsPerPage); // 初始化当前页码 var currentPage = 1; // 显示第一页的数据 showPage(currentPage); // 创建分页按钮 var pagination = document.createElement("div"); pagination.id = "pagination"; // 添加分页按钮到页面 document.body.appendChild(pagination); // 创建分页按钮并添加到分页容器 function createPaginationButton(pageNumber) { var button = document.createElement("button"); button.innerText = pageNumber; button.addEventListener("click", function() { showPage(pageNumber); }); return button; } // 添加分页按钮到分页容器 for (var i = 1; i <= totalPages; i++) { pagination.appendChild(createPaginationButton(i)); } // 显示指定页码的数据 function showPage(pageNumber) { // 隐藏所有行 for (var i = 1; i < table.rows.length; i++) { table.rows[i].style.display = "none"; } // 显示当前页码的行 for (var i = (pageNumber 1) * rowsPerPage; i < pageNumber * rowsPerPage; i++) { if (i >= 0 && i < table.rows.length) { table.rows[i].style.display = ""; } } // 更新当前页码 currentPage = pageNumber; } // FAQs FAQs: 1. 问题：如何改变每页显示的行数？ 解答：可以通过修改`rowsPerPage`变量的值来改变每页显示的行数，将`rowsPerPage`设置为20，则每页将显示20行数据。 2. 问题：如何处理没有数据的情况？ 解答：如果表格中没有数据，即`table.rows.length`为0，则不需要创建分页按钮，也不需要显示任何数据行，可以在`showPage`函数中添加一个检查，以确保在显示数据之前表格中至少有一行数据。 国内文献权威来源： 1. 中国知网（CNKI）：中国最大的学术文献数据库，提供广泛的学术资源，包括期刊、学位论文、会议论文等。 2. 万方数据：提供丰富的学术资源，包括期刊、学位论文、会议论文等，是重要的学术资源库之一。