js实现分页跳转

实现分页跳转的基本方法

通过监听页码按钮点击事件，动态修改当前页码并重新加载数据。

// 分页组件结构示例
<div class="pagination">
  <button class="prev">上一页</button>
  <div class="page-numbers"></div>
  <button class="next">下一页</button>
</div>

核心逻辑实现

初始化分页参数并渲染页码按钮

let currentPage = 1;
const totalPages = 10;
const pageContainer = document.querySelector('.page-numbers');

function renderPagination() {
  pageContainer.innerHTML = '';

  // 显示页码范围（前后各2页）
  const start = Math.max(1, currentPage - 2);
  const end = Math.min(totalPages, currentPage + 2);

  for (let i = start; i <= end; i++) {
    const pageBtn = document.createElement('button');
    pageBtn.textContent = i;
    pageBtn.className = i === currentPage ? 'active' : '';
    pageBtn.addEventListener('click', () => gotoPage(i));
    pageContainer.appendChild(pageBtn);
  }
}

页面跳转功能

处理页面跳转并更新UI状态

function gotoPage(page) {
  if (page < 1 || page > totalPages || page === currentPage) return;

  currentPage = page;
  renderPagination();
  loadPageData(page); // 加载对应页数据
}

// 绑定翻页按钮事件
document.querySelector('.prev').addEventListener('click', () => gotoPage(currentPage - 1));
document.querySelector('.next').addEventListener('click', () => gotoPage(currentPage + 1));

数据加载示例

模拟异步数据加载过程

function loadPageData(page) {
  console.log(`加载第${page}页数据...`);
  // 实际项目中替换为AJAX请求
  // fetch(`/api/data?page=${page}`)
  //   .then(res => res.json())
  //   .then(data => updateUI(data))
}

完整示例代码

整合所有功能的完整实现

class Pagination {
  constructor(container, options) {
    this.container = document.querySelector(container);
    this.currentPage = 1;
    this.totalPages = options.totalPages || 10;
    this.onPageChange = options.onPageChange || function() {};

    this.init();
  }

  init() {
    this.container.innerHTML = `
      <button class="prev">上一页</button>
      <div class="page-numbers"></div>
      <button class="next">下一页</button>
    `;

    this.render();
    this.bindEvents();
  }

  render() {
    const pageContainer = this.container.querySelector('.page-numbers');
    pageContainer.innerHTML = '';

    const start = Math.max(1, this.currentPage - 2);
    const end = Math.min(this.totalPages, this.currentPage + 2);

    for (let i = start; i <= end; i++) {
      const pageBtn = document.createElement('button');
      pageBtn.textContent = i;
      pageBtn.className = i === this.currentPage ? 'active' : '';
      pageBtn.dataset.page = i;
      pageContainer.appendChild(pageBtn);
    }
  }

  bindEvents() {
    this.container.addEventListener('click', (e) => {
      if (e.target.classList.contains('prev')) {
        this.gotoPage(this.currentPage - 1);
      } else if (e.target.classList.contains('next')) {
        this.gotoPage(this.currentPage + 1);
      } else if (e.target.dataset.page) {
        this.gotoPage(parseInt(e.target.dataset.page));
      }
    });
  }

  gotoPage(page) {
    if (page < 1 || page > this.totalPages || page === this.currentPage) return;

    this.currentPage = page;
    this.render();
    this.onPageChange(page);
  }
}

// 使用示例
new Pagination('.pagination', {
  totalPages: 15,
  onPageChange: (page) => {
    console.log(`当前页码: ${page}`);
    // 实际数据加载逻辑
  }
});

样式建议

为分页组件添加基础样式

.pagination {
  display: flex;
  gap: 5px;
  margin: 20px 0;
}

.pagination button {
  padding: 5px 10px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
}

.pagination button.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}