当前位置：首页 > JavaScript

前端实现分页功能js

2026-04-04 18:43:22JavaScript

分页功能的基本实现思路

分页功能通常需要处理数据分割、页码生成和交互逻辑。以下是一个基于JavaScript的通用实现方案，适用于前端数据分页展示。

数据分片处理

将完整数据数组按每页显示条数分割成多个子数组：

function paginateData(data, itemsPerPage) {
  const totalPages = Math.ceil(data.length / itemsPerPage);
  const paginatedData = [];

  for (let i = 0; i < totalPages; i++) {
    const start = i * itemsPerPage;
    const end = start + itemsPerPage;
    paginatedData.push(data.slice(start, end));
  }

  return {
    data: paginatedData,
    totalPages: totalPages
  };
}

页码渲染逻辑

生成可视化的页码导航元素，包含首页、末页和中间页码：

前端实现分页功能js

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

  // 上一页按钮
  if (currentPage > 1) {
    pagination.appendChild(createPageItem('«', currentPage - 1));
  }

  // 页码按钮
  const visiblePages = getVisiblePages(currentPage, totalPages);
  visiblePages.forEach(page => {
    const item = createPageItem(page, page);
    if (page === currentPage) {
      item.classList.add('active');
    }
    pagination.appendChild(item);
  });

  // 下一页按钮
  if (currentPage < totalPages) {
    pagination.appendChild(createPageItem('»', currentPage + 1));
  }
}

function createPageItem(text, page) {
  const li = document.createElement('li');
  li.className = 'page-item';
  const a = document.createElement('a');
  a.className = 'page-link';
  a.href = '#';
  a.textContent = text;
  a.onclick = () => handlePageChange(page);
  li.appendChild(a);
  return li;
}

可视页码范围计算

控制显示的页码数量，避免过多页码显示：

function getVisiblePages(currentPage, totalPages) {
  const range = 2; // 显示当前页前后各2页
  let start = Math.max(1, currentPage - range);
  let end = Math.min(totalPages, currentPage + range);

  // 调整起始页码确保始终显示固定数量的页码
  if (currentPage - start < range) {
    end = Math.min(totalPages, end + (range - (currentPage - start)));
  }
  if (end - currentPage < range) {
    start = Math.max(1, start - (range - (end - currentPage)));
  }

  const pages = [];
  for (let i = start; i <= end; i++) {
    pages.push(i);
  }
  return pages;
}

页面切换处理

处理页码点击事件并更新视图：

前端实现分页功能js

let currentPage = 1;
let paginatedData = [];

function handlePageChange(page) {
  currentPage = page;
  renderPageContent(paginatedData[currentPage - 1]);
  renderPagination(currentPage, paginatedData.length);
}

function renderPageContent(pageData) {
  const contentContainer = document.getElementById('content');
  contentContainer.innerHTML = '';

  pageData.forEach(item => {
    // 根据实际数据结构渲染内容
    const element = document.createElement('div');
    element.textContent = item.name || item.id;
    contentContainer.appendChild(element);
  });
}

完整示例调用

初始化分页功能的完整流程：

// 示例数据
const allData = Array.from({length: 50}, (_, i) => ({id: i+1, name: `Item ${i+1}`}));

// 初始化分页
const itemsPerPage = 10;
const result = paginateData(allData, itemsPerPage);
paginatedData = result.data;

// 渲染第一页
renderPageContent(paginatedData[0]);
renderPagination(1, result.totalPages);

样式建议

基础的CSS样式增强用户体验：

.pagination {
  display: flex;
  list-style: none;
  padding: 0;
}

.page-item {
  margin: 0 5px;
}

.page-link {
  padding: 5px 10px;
  border: 1px solid #ddd;
  cursor: pointer;
}

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

动态数据加载方案

对于大数据量场景，可采用异步加载方式：

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

// 使用时替换renderPageContent的实现
async function handlePageChange(page) {
  const data = await loadPaginatedData(page, 10);
  renderPageContent(data.items);
  renderPagination(page, data.totalPages);
}

以上实现提供了完整的前端分页解决方案，可根据实际需求调整每页显示数量、页码显示范围等参数。对于框架项目（如React/Vue），可将核心逻辑封装为可复用组件。