当前位置：首页 > JavaScript

js实现分页跳转

2026-03-01 09:40:01JavaScript

实现分页跳转的基本逻辑

分页跳转通常需要以下核心功能：计算总页数、渲染分页按钮、处理跳转事件。以下是基于原生JavaScript的实现方法。

js实现分页跳转

计算总页数

根据总数据量和每页显示数量计算总页数：

js实现分页跳转

const totalItems = 100; // 总数据量
const itemsPerPage = 10; // 每页显示数量
const totalPages = Math.ceil(totalItems / itemsPerPage);

渲染分页按钮

动态生成分页按钮的DOM元素：

function renderPagination(currentPage, totalPages) {
  const pagination = document.getElementById('pagination');
  pagination.innerHTML = '';

  // 上一页按钮
  if (currentPage > 1) {
    const prevBtn = document.createElement('button');
    prevBtn.textContent = '上一页';
    prevBtn.addEventListener('click', () => gotoPage(currentPage - 1));
    pagination.appendChild(prevBtn);
  }

  // 页码按钮
  for (let i = 1; i <= totalPages; i++) {
    const pageBtn = document.createElement('button');
    pageBtn.textContent = i;
    if (i === currentPage) {
      pageBtn.classList.add('active');
    }
    pageBtn.addEventListener('click', () => gotoPage(i));
    pagination.appendChild(pageBtn);
  }

  // 下一页按钮
  if (currentPage < totalPages) {
    const nextBtn = document.createElement('button');
    nextBtn.textContent = '下一页';
    nextBtn.addEventListener('click', () => gotoPage(currentPage + 1));
    pagination.appendChild(nextBtn);
  }
}

处理跳转逻辑

实现页面跳转和数据加载功能：

function gotoPage(pageNumber) {
  // 更新当前页码
  currentPage = pageNumber;

  // 重新渲染分页按钮
  renderPagination(currentPage, totalPages);

  // 加载对应页面的数据
  loadPageData(currentPage);
}

function loadPageData(page) {
  const startIndex = (page - 1) * itemsPerPage;
  const endIndex = Math.min(startIndex + itemsPerPage, totalItems);

  // 这里替换为实际的数据获取逻辑
  console.log(`加载第${page}页数据，范围：${startIndex}-${endIndex}`);
}

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <style>
    button.active {
      background-color: #4CAF50;
      color: white;
    }
  </style>
</head>
<body>
  <div id="pagination"></div>
  <div id="content"></div>

  <script>
    const totalItems = 100;
    const itemsPerPage = 10;
    const totalPages = Math.ceil(totalItems / itemsPerPage);
    let currentPage = 1;

    // 初始化
    renderPagination(currentPage, totalPages);
    loadPageData(currentPage);

    function renderPagination(currentPage, totalPages) {
      const pagination = document.getElementById('pagination');
      pagination.innerHTML = '';

      if (currentPage > 1) {
        const prevBtn = document.createElement('button');
        prevBtn.textContent = '上一页';
        prevBtn.addEventListener('click', () => gotoPage(currentPage - 1));
        pagination.appendChild(prevBtn);
      }

      for (let i = 1; i <= totalPages; i++) {
        const pageBtn = document.createElement('button');
        pageBtn.textContent = i;
        if (i === currentPage) {
          pageBtn.classList.add('active');
        }
        pageBtn.addEventListener('click', () => gotoPage(i));
        pagination.appendChild(pageBtn);
      }

      if (currentPage < totalPages) {
        const nextBtn = document.createElement('button');
        nextBtn.textContent = '下一页';
        nextBtn.addEventListener('click', () => gotoPage(currentPage + 1));
        pagination.appendChild(nextBtn);
      }
    }

    function gotoPage(pageNumber) {
      currentPage = pageNumber;
      renderPagination(currentPage, totalPages);
      loadPageData(currentPage);
    }

    function loadPageData(page) {
      const startIndex = (page - 1) * itemsPerPage;
      const endIndex = Math.min(startIndex + itemsPerPage, totalItems);
      document.getElementById('content').textContent = 
        `当前显示第${page}页，数据范围：${startIndex}-${endIndex}`;
    }
  </script>
</body>
</html>