js实现分页跳转

2026-01-30 18:37:41JavaScript

分页跳转的实现方法

在JavaScript中实现分页跳转功能，可以通过DOM操作结合事件监听完成。以下是常见的实现方式：

基础HTML结构

<div id="pagination">
  <button class="page-btn" data-page="1">1</button>
  <button class="page-btn" data-page="2">2</button>
  <button class="page-btn" data-page="3">3</button>
</div>
<div id="content"></div>

事件监听方式

document.querySelectorAll('.page-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const pageNum = this.getAttribute('data-page');
    loadPageContent(pageNum);
  });
});

function loadPageContent(page) {
  // 模拟AJAX请求或直接操作DOM
  document.getElementById('content').innerHTML = `当前显示第${page}页内容`;

  // 更新活动页样式
  document.querySelectorAll('.page-btn').forEach(btn => {
    btn.classList.remove('active');
    if(btn.getAttribute('data-page') === page) {
      btn.classList.add('active');
    }
  });
}

动态生成分页按钮

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

  for(let i = 1; i <= totalPages; i++) {
    const btn = document.createElement('button');
    btn.className = `page-btn ${i === currentPage ? 'active' : ''}`;
    btn.textContent = i;
    btn.setAttribute('data-page', i);
    pagination.appendChild(btn);
  }

  // 重新绑定事件
  document.querySelectorAll('.page-btn').forEach(btn => {
    btn.addEventListener('click', function() {
      const page = parseInt(this.getAttribute('data-page'));
      generatePagination(totalPages, page);
      loadPageContent(page);
    });
  });
}

带前后导航的分页

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

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

  // 页码按钮
  for(let i = 1; i <= totalPages; i++) {
    const btn = document.createElement('button');
    btn.className = `page-btn ${i === currentPage ? 'active' : ''}`;
    btn.textContent = i;
    btn.addEventListener('click', () => {
      generatePagination(totalPages, i);
      loadPageContent(i);
    });
    container.appendChild(btn);
  }

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

结合AJAX请求

async function loadPageContent(page) {
  try {
    const response = await fetch(`/api/data?page=${page}`);
    const data = await response.json();

    document.getElementById('content').innerHTML = data.content;
    generatePagination(data.totalPages, page);
  } catch(error) {
    console.error('加载分页数据失败:', error);
  }
}

样式处理建议

.page-btn {
  padding: 5px 10px;
  margin: 0 5px;
  cursor: pointer;
  border: 1px solid #ddd;
  background: white;
}

.page-btn.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

实现分页跳转时需要考虑以下要点：

js实现分页跳转