当前位置：首页 > JavaScript

js实现分页功能

2026-04-04 13:58:04JavaScript

实现分页功能的核心逻辑

分页功能通常需要以下核心参数：当前页码（currentPage）、每页数据量（pageSize）、总数据量（total）。通过计算总页数并控制数据切片实现分页效果。

// 示例数据
const allData = [/* 原始数据数组 */];
const pageSize = 10; // 每页显示10条
let currentPage = 1; // 当前页码

// 计算总页数
const totalPages = Math.ceil(allData.length / pageSize);

// 获取当前页数据
const getCurrentPageData = () => {
  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  return allData.slice(startIndex, endIndex);
};

分页器UI组件实现

通过动态生成分页按钮，并绑定点击事件切换页码：

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

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

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

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

完整示例整合

将数据渲染与分页控制结合：

function updatePage() {
  const pageData = getCurrentPageData();
  renderData(pageData); // 自定义的数据渲染函数
  renderPagination();
}

// 初始化
updatePage();

高级优化方案

对于大数据量或异步加载场景，可采用以下优化：

前端缓存分页

const pageCache = {};
function getPage(pageNum) {
  if (!pageCache[pageNum]) {
    const start = (pageNum - 1) * pageSize;
    pageCache[pageNum] = allData.slice(start, start + pageSize);
  }
  return pageCache[pageNum];
}

异步分页请求

async function fetchPage(pageNum) {
  const res = await fetch(`/api/data?page=${pageNum}&size=${pageSize}`);
  return await res.json();
}

样式增强建议

通过CSS增强分页器视觉效果：

js实现分页功能

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

.pagination button:hover {
  background: #f5f5f5;
}

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