html5静态网页如何实现分页功能与页码跳转

在html5静态网页中实现分页功能和页码跳转，核心思路是通过JavaScript控制数据的截取与DOM元素的动态渲染，不需要依赖后端接口支持，适合展示固定数据集或者前端模拟数据的场景。

核心实现思路

静态网页分页的本质是将完整的数据集按照每页固定条数拆分，根据当前页码计算需要展示的数据片段，同时动态生成页码按钮并处理点击事件。整体流程可以分为三个部分：

• 数据准备：提前定义好需要展示的完整数据数组，或者从本地存储、JSON文件中读取数据
• 分页逻辑：计算总页数，根据当前页码截取对应数据片段，渲染到页面容器中
• 交互处理：生成页码按钮，监听页码点击、跳转输入框的确认事件，更新当前页码并重新渲染

完整实现示例

1. 基础HTML结构

首先搭建页面的基础结构，包含数据展示容器、页码容器和跳转输入框：

<div class="page-container">
  <!-- 数据展示区域 -->
  <ul id="data-list"></ul>
  
  <!-- 分页控制区域 -->
  <div class="pagination">
    <button id="prev-btn">上一页</button>
    <div id="page-number-box"></div>
    <button id="next-btn">下一页</button>
  </div>
  
  <!-- 页码跳转区域 -->
  <div class="jump-box">
    <span>跳转到</span>
    <input type="number" id="jump-input" min="1" />
    <button id="jump-btn">确定</button>
  </div>
</div>

2. CSS基础样式

添加简单的样式让分页效果更清晰，实际项目中可以根据需求调整：

.page-container {
  width: 800px;
  margin: 20px auto;
}
#data-list {
  list-style: none;
  padding: 0;
}
#data-list li {
  padding: 12px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
  gap: 8px;
}
.pagination button {
  padding: 6px 12px;
  cursor: pointer;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 4px;
}
.pagination button.active {
  background: #409eff;
  color: #fff;
  border-color: #409eff;
}
.pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
#page-number-box {
  display: flex;
  gap: 4px;
}
.jump-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
#jump-input {
  width: 60px;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

3. JavaScript分页逻辑实现

接下来编写核心的JavaScript代码，实现数据分页、页码渲染和跳转功能：

// 模拟完整数据集，实际项目中可以替换为本地JSON数据或者接口返回的前端模拟数据
const allData = [];
for (let i = 1; i <= 53; i++) {
  allData.push(`这是第 ${i} 条测试数据，用于展示静态网页分页效果`);
}

// 分页配置
const PAGE_SIZE = 10; // 每页展示10条数据
let currentPage = 1; // 当前页码，默认第一页
const totalPage = Math.ceil(allData.length / PAGE_SIZE); // 计算总页数

// 获取DOM元素
const dataList = document.getElementById('data-list');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const pageNumberBox = document.getElementById('page-number-box');
const jumpInput = document.getElementById('jump-input');
const jumpBtn = document.getElementById('jump-btn');

/**
 * 渲染当前页的数据到页面
 */
function renderData() {
  // 计算当前页的数据起始和结束索引
  const startIndex = (currentPage - 1) * PAGE_SIZE;
  const endIndex = Math.min(startIndex + PAGE_SIZE, allData.length);
  const currentData = allData.slice(startIndex, endIndex);
  
  // 清空原有数据
  dataList.innerHTML = '';
  // 渲染新的数据项
  currentData.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    dataList.appendChild(li);
  });
  
  // 更新上一页、下一页按钮状态
  prevBtn.disabled = currentPage === 1;
  nextBtn.disabled = currentPage === totalPage;
  
  // 更新跳转输入框的最大值和当前值
  jumpInput.max = totalPage;
  jumpInput.value = currentPage;
}

/**
 * 渲染页码按钮
 */
function renderPageNumber() {
  pageNumberBox.innerHTML = '';
  // 页码显示逻辑：最多显示7个页码，当前页码居中
  let startPage = Math.max(1, currentPage - 3);
  let endPage = Math.min(totalPage, startPage + 6);
  // 调整起始页码，保证显示7个页码
  if (endPage - startPage < 6) {
    startPage = Math.max(1, endPage - 6);
  }
  
  for (let i = startPage; i <= endPage; i++) {
    const pageBtn = document.createElement('button');
    pageBtn.textContent = i;
    if (i === currentPage) {
      pageBtn.classList.add('active');
    }
    // 绑定页码点击事件
    pageBtn.addEventListener('click', () => {
      currentPage = i;
      renderData();
      renderPageNumber();
    });
    pageNumberBox.appendChild(pageBtn);
  }
}

// 上一页按钮点击事件
prevBtn.addEventListener('click', () => {
  if (currentPage > 1) {
    currentPage--;
    renderData();
    renderPageNumber();
  }
});

// 下一页按钮点击事件
nextBtn.addEventListener('click', () => {
  if (currentPage < totalPage) {
    currentPage++;
    renderData();
    renderPageNumber();
  }
});

// 页码跳转确定按钮点击事件
jumpBtn.addEventListener('click', () => {
  const targetPage = parseInt(jumpInput.value);
  if (isNaN(targetPage)) {
    alert('请输入有效的页码数字');
    return;
  }
  if (targetPage < 1 || targetPage > totalPage) {
    alert(`页码范围必须在 1 到 ${totalPage} 之间`);
    return;
  }
  currentPage = targetPage;
  renderData();
  renderPageNumber();
});

// 跳转输入框支持回车触发跳转
jumpInput.addEventListener('keyup', (e) => {
  if (e.key === 'Enter') {
    jumpBtn.click();
  }
});

// 初始化页面
renderData();
renderPageNumber();

注意事项

• 如果数据量非常大，前端一次性加载所有数据会影响性能，可以结合懒加载或者分批次加载数据的方式优化
• 页码显示逻辑可以根据需求调整，比如添加首页、末页按钮，或者省略号显示更多页码
• 跳转输入框需要做边界校验，避免用户输入超出范围的页码导致错误
• 如果页面有刷新需求，可以将当前页码存储到localStorage中，页面加载时读取恢复页码状态

扩展优化

如果需要支持分页状态的持久化，可以添加如下代码，在页面刷新后保留当前页码：

// 页面加载时读取存储的页码
const savedPage = localStorage.getItem('currentPage');
if (savedPage && !isNaN(savedPage)) {
  const page = parseInt(savedPage);
  if (page >= 1 && page <= totalPage) {
    currentPage = page;
  }
}

// 每次页码更新时存储到localStorage
function saveCurrentPage() {
  localStorage.setItem('currentPage', currentPage);
}

// 在页码变更的相关逻辑中调用saveCurrentPage，比如页码点击、上下页点击、跳转确认后调用
// 示例：在prevBtn的点击回调中添加saveCurrentPage()

html5静态网页分页功能页码跳转修改时间：2026-07-11 22:06:14