js分页代码和实例

在JavaScript中实现分页功能，通常涉及到计算总页数、当前页的数据切片、以及页面渲染等步骤。以下是一个简单的分页代码示例和解释：

HTML部分

<div id="pagination">
  <button id="prevPage">上一页</button>
  <span id="pageInfo"></span>
  <button id="nextPage">下一页</button>
</div>
<ul id="dataList"></ul>

JavaScript部分

// 假设我们有一个数组作为数据源
const data = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);

// 分页配置
const itemsPerPage = 10; // 每页显示10条数据
let currentPage = 1; // 当前页码

// 计算总页数
const totalPages = Math.ceil(data.length / itemsPerPage);

// 渲染当前页的数据
function renderPage(page) {
  const start = (page - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  const pageData = data.slice(start, end);
  const dataList = document.getElementById('dataList');
  dataList.innerHTML = ''; // 清空列表
  pageData.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    dataList.appendChild(li);
  });
}

// 更新分页信息
function updatePaginationInfo() {
  const pageInfo = document.getElementById('pageInfo');
  pageInfo.textContent = `第 ${currentPage} 页，共 ${totalPages} 页`;
}

// 上一页按钮事件处理
document.getElementById('prevPage').addEventListener('click', () => {
  if (currentPage > 1) {
    currentPage--;
    renderPage(currentPage);
    updatePaginationInfo();
  }
});

// 下一页按钮事件处理
document.getElementById('nextPage').addEventListener('click', () => {
  if (currentPage < totalPages) {
    currentPage++;
    renderPage(currentPage);
    updatePaginationInfo();
  }
});

// 初始化页面
renderPage(currentPage);
updatePaginationInfo();