js 翻页

// 示例代码：使用 JavaScript 实现简单的分页功能

// 假设我们有一个包含多个项目的数组
const items = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);

// 每页显示的项目数量
const itemsPerPage = 10;

// 当前页面索引
let currentPage = 1;

// 获取总页数
function getTotalPages() {
  return Math.ceil(items.length / itemsPerPage);
}

// 显示当前页面的内容
function showPage(page) {
  const start = (page - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  const pageItems = items.slice(start, end);

  // 清空之前的显示内容
  document.getElementById('items').innerHTML = '';

  // 将当前页面的项目添加到 DOM 中
  pageItems.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    document.getElementById('items').appendChild(li);
  });

  // 更新分页按钮的状态
  updatePaginationButtons();
}

// 更新分页按钮的状态
function updatePaginationButtons() {
  document.getElementById('prev').disabled = currentPage === 1;
  document.getElementById('next').disabled = currentPage === getTotalPages();
}

// 处理上一页按钮点击事件
function handlePrevClick() {
  if (currentPage > 1) {
    currentPage--;
    showPage(currentPage);
  }
}

// 处理下一页按钮点击事件
function handleNextClick() {
  if (currentPage < getTotalPages()) {
    currentPage++;
    showPage(currentPage);
  }
}

// 初始化分页
function initPagination() {
  showPage(currentPage);

  document.getElementById('prev').addEventListener('click', handlePrevClick);
  document.getElementById('next').addEventListener('click', handleNextClick);
}

// HTML 结构（假设已经存在于页面中）
/*
<ul id="items"></ul>
<button id="prev">Previous</button>
<button id="next">Next</button>
*/

// 调用初始化函数
initPagination();

解释说明：

• items：一个包含所有项目的数组，模拟了我们要分页显示的数据。
• itemsPerPage：每页显示的项目数量。
• currentPage：当前页面索引，默认为第一页。
• getTotalPages：计算总页数。
• showPage：根据当前页面索引显示对应的项目，并更新分页按钮状态。
• updatePaginationButtons：根据当前页面索引禁用或启用分页按钮。
• handlePrevClick 和 handleNextClick：处理分页按钮点击事件，切换到上一页或下一页。
• initPagination：初始化分页功能，绑定事件监听器并显示第一页。

这段代码展示了如何使用 JavaScript 实现一个简单的分页功能。你可以将其嵌入到你的网页中，并根据需要进行调整。