当前位置：首页 > JavaScript

如何用js实现分页

2026-03-01 10:06:17JavaScript

分页的基本实现思路

分页功能通常涉及前端展示和数据分割两部分。以下是一个基于JavaScript的简单分页实现方法，适用于前端数据分页或配合后端API的分页请求。

定义分页参数

const pagination = {
  currentPage: 1,    // 当前页码
  itemsPerPage: 10,  // 每页显示数量
  totalItems: 0,     // 总数据量
  totalPages: 0      // 总页数
};

计算总页数

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

function calculateTotalPages(totalItems, itemsPerPage) {
  return Math.ceil(totalItems / itemsPerPage);
}

pagination.totalPages = calculateTotalPages(pagination.totalItems, pagination.itemsPerPage);

获取当前页数据

如果是前端分页，从完整数据中截取当前页的数据：

function getCurrentPageData(allData, currentPage, itemsPerPage) {
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  return allData.slice(startIndex, endIndex);
}

渲染分页控件

创建一个基本的分页UI控件：

如何用js实现分页

function renderPagination(pagination) {
  const paginationContainer = document.getElementById('pagination');
  paginationContainer.innerHTML = '';

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

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

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

更新分页状态

当页码变化时更新分页状态和显示数据：

function updatePagination() {
  // 获取新页数据
  const currentData = getCurrentPageData(allData, pagination.currentPage, pagination.itemsPerPage);

  // 重新渲染分页控件
  renderPagination(pagination);

  // 更新数据显示
  renderData(currentData);
}

配合后端API的分页实现

如果数据来自后端API，通常需要将分页参数传递给API：

如何用js实现分页

async function fetchPaginatedData(page, perPage) {
  try {
    const response = await fetch(`/api/data?page=${page}&per_page=${perPage}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    return [];
  }
}

分页优化技巧

添加页面跳转输入框：

const gotoInput = document.createElement('input');
gotoInput.type = 'number';
gotoInput.min = 1;
gotoInput.max = pagination.totalPages;
gotoInput.placeholder = '跳转到';

const gotoBtn = document.createElement('button');
gotoBtn.textContent = '跳转';
gotoBtn.addEventListener('click', () => {
  const page = parseInt(gotoInput.value);
  if (page >= 1 && page <= pagination.totalPages) {
    pagination.currentPage = page;
    updatePagination();
  }
});
paginationContainer.appendChild(gotoInput);
paginationContainer.appendChild(gotoBtn);

响应式分页

根据屏幕尺寸调整每页显示数量：

function adjustItemsPerPage() {
  if (window.innerWidth < 768) {
    pagination.itemsPerPage = 5;
  } else {
    pagination.itemsPerPage = 10;
  }
  pagination.totalPages = calculateTotalPages(pagination.totalItems, pagination.itemsPerPage);
  updatePagination();
}

window.addEventListener('resize', adjustItemsPerPage);

分页样式建议

为分页控件添加基本CSS样式：

#pagination {
  display: flex;
  gap: 5px;
  margin-top: 20px;
}

#pagination button {
  padding: 5px 10px;
  cursor: pointer;
}

#pagination button:disabled {
  background-color: #ccc;
  cursor: default;
}

#pagination input {
  width: 50px;
  text-align: center;
}

以上实现提供了一个完整的分页功能解决方案，可以根据实际需求进行调整和扩展。