分页功能可通过原生html、css和javaScript实现，使用按钮和容器构建分页结构，结合样式美化与javascript逻辑控制页面切换、数据渲染及状态更新，支持动态生成页码、禁用越界按钮，并可扩展页码限制、跳转输入、ajax加载等优化功能，适用于静态网页或前端数据分页场景。
实现一个简单的 html5 网页分页功能并不需要复杂的框架，通过原生 HTML、CSS 和 JavaScript 就能完成。下面是一个实用的分页器组件实现教程，适合静态网页或前端数据分页场景。
1. 分页功能的基本结构（HTML）
使用有序列表或 div 容器来构建分页按钮的基本结构：
<div class="pagination"> <button id="prev-page">上一页</button> <span id="page-info"></span> <button id="next-page">下一页</button> </div>
也可以加入页码数字按钮，便于跳转：
<div class="pagination"> <button id="prev-page">‹ 上一页</button> <div id="page-numbers"></div> <button id="next-page">下一页 ›</button> </div>
2. 样式美化（CSS）
为分页器添加基本样式，使其更美观易用：
立即学习“前端免费学习笔记（深入）”；
.pagination { display: flex; justify-content: center; align-items: center; margin: 20px 0; gap: 8px; } <p>.pagination button { padding: 8px 12px; border: 1px solid #ccc; background-color: #fff; cursor: pointer; font-size: 14px; border-radius: 4px; }</p><p>.pagination button:hover { background-color: #f0f0f0; }</p><p>.pagination button:disabled { color: #aaa; cursor: not-allowed; }</p><h1>page-numbers {</h1><p>display: flex; gap: 6px; }</p><h1>page-numbers button {</h1><p>min-width: 32px; padding: 6px; }</p><h1>page-numbers .active {</h1><p>background-color: #007bff; color: white; border-color: #007bff; }</p>
3. 实现分页逻辑（JavaScript）
假设你有一组数据，需要每页显示固定条数。以下是一个完整示例：
// 示例数据 const items = Array.from({ length: 100 }, (_, i) => `条目 ${i + 1}`); const itemsPerPage = 10; let currentPage = 1; <p>const totalPages = Math.ceil(items.length / itemsPerPage);</p><p>// 获取当前页的数据 function getCurrentPageData(page) { const start = (page - 1) * itemsPerPage; const end = start + itemsPerPage; return items.slice(start, end); }</p><p>// 渲染内容（可替换为渲染表格、列表等） function renderItems() { const container = document.getElementById('content'); const data = getCurrentPageData(currentPage); container.innerHTML = ''; data.forEach(item => { const p = document.createElement('p'); p.textContent = item; container.appendChild(p); }); }</p><p>// 更新分页按钮状态 function updatePagination() { const pageNumbersContainer = document.getElementById('page-numbers'); const prevBtn = document.getElementById('prev-page'); const nextBtn = document.getElementById('next-page');</p><p>// 显示当前页信息 document.getElementById('page-info').textContent = <code>第 ${currentPage} 页，共 ${totalPages} 页</code>;</p><p>// 控制上一页/下一页禁用状态 prevBtn.disabled = currentPage === 1; nextBtn.disabled = currentPage === totalPages;</p><p>// 生成页码按钮 pageNumbersContainer.innerHTML = ''; for (let i = 1; i <= totalPages; i++) { const btn = document.createElement('button'); btn.textContent = i; if (i === currentPage) { btn.classlist.add('active'); } btn.addEventListener('click', () => { currentPage = i; renderItems(); updatePagination(); }); pageNumbersContainer.appendChild(btn); } }</p><p>// 绑定事件 document.getElementById('prev-page').addEventListener('click', () => { if (currentPage > 1) { currentPage--; renderItems(); updatePagination(); } });</p><p>document.getElementById('next-page').addEventListener('click', () => { if (currentPage < totalPages) { currentPage++; renderItems(); updatePagination(); } });</p><p>// 初始化 renderItems(); updatePagination();</p>
4. 可选优化建议
让分页器更实用：
- 限制显示页码数量：当总页数很多时，只显示当前页前后几页，如“1 … 4 5 6 7 8 … 10”
- 添加跳转输入框：让用户手动输入页码快速跳转
- 结合 AJAX：如果是从服务器获取数据，可在翻页时请求对应页的数据
- 响应式设计：在小屏幕上隐藏部分按钮，使用图标代替文字
基本上就这些。这个分页组件轻量、可定制，适用于大多数静态页面或前端控制的数据展示场景。不复杂但容易忽略细节，比如边界判断和 ui 同步。按需调整即可。