纯JavaScript实现自定义分页导航条，核心是动态生成页码按钮、绑定点击事件、更新当前页并刷新内容区域，需精确控制总页数、当前页、每页条目数三个变量并实时更新UI状态。
用 DOM 操作实现自定义分页导航条，核心是动态生成页码按钮、绑定点击事件、更新当前页并刷新内容区域。不需要框架，纯 JavaScript 就能完成，关键是控制好“总页数”“当前页”“每页条目数”三个变量，并实时更新 UI 状态。
1. 准备数据与基础结构
先有分页所需的数据源（比如一个数组），再定义分页参数：
-
data：原始数据数组，如
['item1', 'item2', ..., 'item100'] -
itemsPerPage：每页显示几条，例如
10 -
currentPage：当前页码，初始为
1 -
totalPages：由
Math.ceil(data.length / itemsPerPage)计算得出
HTML 中预留两个容器：<div id="content"></div> 显示当前页内容，<div id="pagination"></div> 放页码按钮。
2. 渲染当前页内容
写一个 renderPage(page) 函数，根据页码提取对应数据片段并插入到 #content：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
function renderPage(page) {
const start = (page - 1) * itemsPerPage;
const end = start + itemsPerPage;
const pageData = data.slice(start, end);
const contentEl = document.getElementById('content');
contentEl.innerHTML = pageData.map((item, i) =>
`<div class="item">第 ${(start + i + 1)} 条：${item}</div>`
).join('');
}3. 动态生成分页按钮
写一个 renderPagination() 函数，生成「上一页」「123…」「下一页」等按钮，插入到 #pagination：
- 始终显示「上一页」，禁用时加
disabled属性 - 页码范围一般显示 1–5 或居中当前页（如当前是 7，显示 5–9），超出用省略号
- 「下一页」同理，超过
totalPages就禁用 - 每个页码按钮设置
data-page属性，方便事件读取
示例关键逻辑：
function renderPagination() {
const paginationEl = document.getElementById('pagination');
let html = '';
<p>// 上一页
html += <code><button class="page-btn" ${currentPage <= 1 ? 'disabled' : ''}>« 上一页</button></code>;</p><p>// 页码（简化版：显示全部，适合页数少；生产环境建议加省略逻辑）
for (let i = 1; i <= totalPages; i++) {
const active = i === currentPage ? ' active' : '';
html += <code><button class="page-btn${active}" data-page="${i}">${i}</button></code>;
}</p><p>// 下一页
html += <code><button class="page-btn" ${currentPage >= totalPages ? 'disabled' : ''}>下一页 »</button></code>;</p><p>paginationEl.innerHTML = html;
}4. 绑定点击事件与状态管理
用事件委托监听 #pagination 内所有按钮点击，更新 currentPage 并重新渲染：
document.getElementById('pagination').addEventListener('click', (e) => {
if (e.target.classList.contains('page-btn') && !e.target.hasAttribute('disabled')) {
if (e.target.textContent.includes('上一页')) {
currentPage = Math.max(1, currentPage - 1);
} else if (e.target.textContent.includes('下一页')) {
currentPage = Math.min(totalPages, currentPage + 1);
} else {
currentPage = parseInt(e.target.getAttribute('data-page'));
}
renderPage(currentPage);
renderPagination(); // 同步更新分页 UI 状态
}
});首次加载时调用 renderPage(1) 和 renderPagination() 即可启动。
不复杂但容易忽略：记得每次切换页码后重绘分页栏，否则「active」样式和禁用状态不会更新；另外对用户输入的非法页码（如非数字、负数）做防御处理会更健壮。
