当前位置：首页 > JavaScript

js 分页实现

2026-02-01 12:34:46JavaScript

分页实现的基本原理

分页的核心是将大量数据分割成多个页面显示，通常需要计算总页数、当前页码及每页数据范围。前端分页可通过数组切片实现，后端分页则依赖数据库的LIMIT和OFFSET查询。

前端分页实现

通过JavaScript对现有数组进行分页处理，适合数据量较小的场景：

js 分页实现

function paginate(array, pageNumber, pageSize) {
  const startIndex = (pageNumber - 1) * pageSize;
  return array.slice(startIndex, startIndex + pageSize);
}

const data = [1, 2, 3, 4, 5, 6, 7, 8];
const currentPage = 2;
const itemsPerPage = 3;
const pagedData = paginate(data, currentPage, itemsPerPage); // 输出 [4, 5, 6]

后端分页实现

结合AJAX请求与后端API，典型的分页参数包括page和pageSize：

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

// 使用示例
fetchPaginatedData(2, 5).then(data => {
  console.log(data.items); // 当前页数据
  console.log(data.totalPages); // 总页数
});

分页组件示例

实现一个简单的分页UI组件，包含页码导航：

js 分页实现

class Pagination {
  constructor(totalItems, itemsPerPage, currentPage = 1) {
    this.totalItems = totalItems;
    this.itemsPerPage = itemsPerPage;
    this.currentPage = currentPage;
    this.totalPages = Math.ceil(totalItems / itemsPerPage);
  }

  render() {
    const paginationEl = document.createElement('div');
    paginationEl.className = 'pagination';

    for (let i = 1; i <= this.totalPages; i++) {
      const pageEl = document.createElement('button');
      pageEl.textContent = i;
      pageEl.className = i === this.currentPage ? 'active' : '';
      pageEl.addEventListener('click', () => this.goToPage(i));
      paginationEl.appendChild(pageEl);
    }

    return paginationEl;
  }

  goToPage(page) {
    this.currentPage = page;
    // 触发数据加载或更新UI
  }
}

性能优化建议

对于大数据量分页，避免使用前端分页，优先采用后端分页。数据库查询时建议使用游标分页（Cursor-based Pagination）替代传统的LIMIT/OFFSET，尤其适合无限滚动场景：

-- 传统分页（性能随offset增大而下降）
SELECT * FROM table LIMIT 10 OFFSET 20;

-- 游标分页（基于最后一条记录的ID）
SELECT * FROM table WHERE id > 20 LIMIT 10;

分页样式与交互

通过CSS增强分页组件的视觉反馈：

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

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

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