答案是通过JavaScript动态控制数据切片与渲染，结合HTML结构和CSS样式实现前端分页。首先构建数据容器和分页按钮，定义数据集及每页条数，编写renderPage函数计算当前页数据范围并更新显示内容，再为上一页、下一页按钮绑定事件实现翻页逻辑，最后初始化第一页展示。该方法基于“数据切片+动态渲染+按钮控制”核心思路，适用于静态数据分页，可扩展页码跳转等复杂功能。
要实现HTML前端的分页效果，主要通过JavaScript动态控制数据的显示区域，结合CSS美化界面。虽然HTML本身无法直接完成分页逻辑，但配合JavaScript可以轻松实现内容分页功能，比如表格数据、文章列表等场景。
1. 基本结构：HTML布局
先构建一个简单的数据展示容器和分页按钮区域：
<div id="data-container"></div> <div id="pagination"> <button id="prev">上一页</button> <span id="page-info"></span> <button id="next">下一页</button> </div>
2. 准备数据与参数设置
在JavaScript中定义要分页的数据和每页显示条数：
const data = [ '项目1', '项目2', '项目3', '项目4', '项目5', '项目6', '项目7', '项目8', '项目9', '项目10', '项目11', '项目12', '项目13', '项目14', '项目15' ]; const itemsPerPage = 5; // 每页显示5条 let currentPage = 1;
3. 实现分页渲染逻辑
编写函数计算当前页的数据并更新页面显示：
立即学习“Java免费学习笔记（深入）”；
function renderPage(page) {
const start = (page - 1) * itemsPerPage;
const end = start + itemsPerPage;
const paginatedData = data.slice(start, end);
<p>const container = document.getElementById('data-container');
container.innerHTML = '<ul>';
paginatedData.forEach(item => {
container.innerHTML += <code><li>${item}</li></code>;
});
container.innerHTML += '</ul>';</p><p>document.getElementById('page-info').textContent = <code>第 ${page} 页，共 ${Math.ceil(data.length / itemsPerPage)} 页</code>;
}</p>4. 绑定翻页事件
为“上一页”和“下一页”按钮添加点击事件：
document.getElementById('prev').addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
renderPage(currentPage);
}
});
<p>document.getElementById('next').addEventListener('click', () => {
const totalPages = Math.ceil(data.length / itemsPerPage);
if (currentPage < totalPages) {
currentPage++;
renderPage(currentPage);
}
});</p><p>// 初始化第一页
renderPage(currentPage);</p>基本上就这些。这套方法适用于静态数据分页，适合小型项目或学习使用。如果需要更复杂的功能（如跳转到指定页、搜索后分页），可以在基础上扩展输入框和页码生成逻辑。关键是理解“切片数据 + 动态渲染 + 按钮控制”的核心思路。
