静态网页分页只能前端模拟，需预载全部数据并用JavaScript控制DOM显隐；核心是按页大小切分数组、动态渲染页面内容及页码按钮，并做好输入校验与性能优化。
静态网页没法用后端分页，只能靠前端模拟
HTML5 静态网页没有服务器支持，fetch 无法读取数据库或动态接口，所以所谓“分页”本质是把全部数据一次性加载进页面，再用 JavaScript 控制显隐。页码跳转不是请求新 URL，而是切换 DOM 节点的 display 状态。
用 JavaScript 手动切数据块 + 生成页码按钮
核心思路：把内容数组按每页条数（如 pageSize = 10）拆成二维数组，每次只显示当前页对应的数据片段；页码按钮绑定 onclick，触发重绘函数。
- 数据必须预先存在 JS 变量里（比如硬编码在
中，或从 JSON 文件同步加载） - 页码按钮不要用
这类伪跳转——它不触发逻辑，只滚动，且无法响应点击事件 -
Math.ceil(data.length / pageSize)是算总页数的唯一可靠方式，别用data.length % pageSize判断
const data = ["条目1", "条目2", "条目3", /* ... 共127项 */]; const pageSize = 10; let currentPage = 1;function renderPage(page) { const start = (page - 1) * pageSize; const end = start + pageSize; const pageData = data.slice(start, end); document.getElementById("list").innerHTML = pageData.map(i =>
).join(""); document.querySelectorAll(".page-btn").forEach(btn => btn.classList.toggle("active", Number(btn.dataset.page) === page)); }${i}function initPagination() { const totalPages = Math.ceil(data.length / pageSize); const pager = document.getElementById("pager"); pager.innerHTML = Array.from({ length: totalPages }, (_, i) => i + 1) .map(num =>
) .join(""); renderPage(1); }
输入框跳转页码要防错和边界检查
用户手动输页码时，常见问题包括：输字母、负数、超范围数字、空格。不校验会导致 slice(-10, 0) 返回空数组，或 renderPage(999) 渲染空白页却无提示。
- 用
parseInt(input.value, 10)转整数，NaN就重置为 1 - 跳转前强制约束：
page = Math.max(1, Math.min(page, totalPages)) - 输完按回车才触发，比实时监听
input更轻量、更可控
document.getElementById("goPage").addEventListener("keypress", e => {
if (e.key === "Enter") {
const input = document.getElementById("pageInput");
let page = parseInt(input.value.trim(), 10);
if (isNaN(page)) page = 1;
page = Math.max(1, Math.min(page, totalPages));
renderPage(page);
input.value = page; // 同步显示合法值
}
});性能和体验细节容易被忽略
127 条数据没问题，但若内容含图片、复杂 HTML 或上千条文本，首次加载会卡顿；页码过多（比如 200 页）直接生成 200 个 也会拖慢渲染。
立即学习“前端免费学习笔记（深入）”；
- 页码栏要做截断：只显示当前页 ±2 页，首尾固定，中间用
…，避免 DOM 泛滥 - 所有列表项建议用
document.createDocumentFragment()批量插入，而非反复innerHTML += - 移动端需加
touchstart事件兼容，iOS Safari 对onclick在上有时不敏感
真要支撑万级数据，静态页就不是合适载体了——该上静态站点生成器（如 Hugo）预渲染分页 HTML，或改用轻量 API + 前端分页库（如 simple-pagination.js），而不是硬扛。
