当前位置：首页 > JavaScript

js 实现分页

2026-02-28 18:26:16JavaScript

分页实现方法

客户端分页

客户端分页适用于数据量较小的情况，所有数据一次性加载到前端，通过JavaScript进行分页展示。

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

// 分页函数
function paginate(array, pageSize, pageNumber) {
  return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
}

// 使用示例
const pageSize = 10;
const currentPage = 1;
const paginatedData = paginate(data, pageSize, currentPage);

服务器端分页

对于大数据量，通常采用服务器端分页，前端只需传递页码和每页条数。

// 前端请求示例
async function fetchPaginatedData(page, size) {
  const response = await fetch(`/api/data?page=${page}&size=${size}`);
  return response.json();
}

// 使用示例
const pageSize = 10;
const currentPage = 1;
fetchPaginatedData(currentPage, pageSize).then(data => {
  console.log(data);
});

分页组件实现

完整的分页组件通常包含页码导航和数据显示。

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

  getCurrentPageData() {
    const start = (this.currentPage - 1) * this.itemsPerPage;
    const end = start + this.itemsPerPage;
    return this.data.slice(start, end);
  }

  nextPage() {
    if (this.currentPage < this.totalPages) {
      this.currentPage++;
    }
    return this.getCurrentPageData();
  }

  prevPage() {
    if (this.currentPage > 1) {
      this.currentPage--;
    }
    return this.getCurrentPageData();
  }

  goToPage(page) {
    if (page >= 1 && page <= this.totalPages) {
      this.currentPage = page;
    }
    return this.getCurrentPageData();
  }
}

UI渲染示例

结合HTML渲染分页控件。

<div id="data-container"></div>
<div id="pagination-controls"></div>

<script>
  const data = [...]; // 你的数据
  const pagination = new Pagination(data, 10);

  function render() {
    // 渲染当前页数据
    document.getElementById('data-container').innerHTML = 
      pagination.getCurrentPageData().map(item => 
        `<div>${item.name}</div>`
      ).join('');

    // 渲染分页控件
    let controls = '';
    for (let i = 1; i <= pagination.totalPages; i++) {
      controls += `<button onclick="changePage(${i})">${i}</button>`;
    }
    document.getElementById('pagination-controls').innerHTML = controls;
  }

  function changePage(page) {
    pagination.goToPage(page);
    render();
  }

  render();
</script>