JS实现简单的前端分页功能
功能：
- 每页显示固定数量的数据条数：用户可以根据下拉选择框动态改变每页显示的条数，例如5、10、20条。
- 上一页、下一页导航：用户可以通过点击“上一页”或“下一页”按钮在数据列表中前后翻页。
- 指定跳转页：用户可以输入一个页码，点击“跳转”按钮直接前往该页。
- 页码及数量显示：在页面上方显示当前是第几页、总共有多少页以及数据总数等信息。
-
分页渲染函数
renderPage()renderPage()函数根据currentPage和pageSize从items数组中截取当前页对应的数据片段，并在页面上显示。还会更新顶部的分页信息文本。 -
分页按钮状态更新函数
updateButtonStates()
根据currentPage与totalPages的对比，禁用或启用“上一页”、“下一页”按钮。例如，如果当前页为1，就应当禁用“上一页”按钮，如果当前页为最后一页，就应当禁用“下一页”按钮。 -
事件绑定
- 当用户在下拉框中选择不同的每页显示条数时，重新计算
totalPages，并将currentPage重置为1，然后重新渲染数据。 - 当用户点击“上一页”、“下一页”时更改
currentPage，并调用renderPage()和updateButtonStates()。 - 当用户在输入框中输入页面号并点击“跳转”时，验证该页码是否在合法范围内。如果合法，则跳转到对应页码并重新渲染。
- 当用户在下拉框中选择不同的每页显示条数时，重新计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>分页示例</title>
<style>body {font-family: Arial, sans-serif;margin: 20px;}.pagination-controls {margin-bottom: 10px;}.pagination-info {margin-bottom: 10px;}ul {list-style: none;padding:0;}li {margin:5px 0;}
</style>
</head>
<body><div class="pagination-controls"><label>每页显示条数：<select id="pageSizeSelect"><option value="5">5</option><option value="10" selected>10</option><option value="20">20</option></select></label>
</div><div class="pagination-info"><span id="pageInfo"></span>
</div><ul id="dataList"></ul><div class="pagination-actions"><button id="prevBtn">上一页</button><button id="nextBtn">下一页</button><input type="number" id="gotoPageInput" placeholder="页码" style="width:60px;"><button id="gotoPageBtn">跳转</button>
</div><script>// 模拟数据，假设有100条数据const items = [];for (let i = 1; i <= 100; i++) {items.push("第 " + i + " 条数据");}let currentPage = 1; // 当前页码let pageSize = 10; // 每页显示条数（默认10条）const totalItems = items.length; let totalPages = Math.ceil(totalItems / pageSize); // 总页数 = 总数据条数 / 每页条数const pageInfo = document.getElementById('pageInfo');const dataList = document.getElementById('dataList');const prevBtn = document.getElementById('prevBtn');const nextBtn = document.getElementById('nextBtn');const gotoPageInput = document.getElementById('gotoPageInput');const gotoPageBtn = document.getElementById('gotoPageBtn');const pageSizeSelect = document.getElementById('pageSizeSelect');// 渲染当前页的数据列表function renderPage() {// 计算当前页数据在总数据中的起始与结束索引const start = (currentPage - 1) * pageSize;const end = start + pageSize;const currentData = items.slice(start, end);// 清空现有列表dataList.innerHTML = '';// 将当前页数据依次加入列表currentData.forEach(item => {const li = document.createElement('li');li.textContent = item;dataList.appendChild(li);});// 更新分页信息pageInfo.textContent = `当前第 ${currentPage} 页 / 共 ${totalPages} 页，总计 ${totalItems} 条数据`;}// 更新分页按钮的状态（例如在第一页禁用“上一页”，在最后一页禁用“下一页”）function updateButtonStates() {prevBtn.disabled = (currentPage <= 1);nextBtn.disabled = (currentPage >= totalPages);}// 当用户选择不同的每页条数时重新计算分页信息pageSizeSelect.addEventListener('change', () => {pageSize = parseInt(pageSizeSelect.value, 10);totalPages = Math.ceil(totalItems / pageSize);currentPage = 1; // 切换后从第一页显示renderPage();updateButtonStates();});// 上一页按钮事件prevBtn.addEventListener('click', () => {if (currentPage > 1) {currentPage--;renderPage();updateButtonStates();}});// 下一页按钮事件nextBtn.addEventListener('click', () => {if (currentPage < totalPages) {currentPage++;renderPage();updateButtonStates();}});// 跳转到指定页按钮事件gotoPageBtn.addEventListener('click', () => {const page = parseInt(gotoPageInput.value, 10);if (!isNaN(page) && page >= 1 && page <= totalPages) {currentPage = page;renderPage();updateButtonStates();} else {alert("请输入有效的页码（1~" + totalPages + "）");}});// 初始化渲染renderPage();updateButtonStates();
</script></body>
</html>