当前位置：首页 > JavaScript

前端实现分页功能js

2026-01-31 02:48:03JavaScript

前端分页实现方法

使用JavaScript实现前端分页功能可以通过多种方式完成，以下是几种常见的方法：

基于数组的分页

将数据存储在数组中，通过计算当前页的起始和结束索引来获取分页数据。

const data = [...]; // 原始数据数组
const itemsPerPage = 10; // 每页显示条数
let currentPage = 1; // 当前页码

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

const pageData = paginate(data, currentPage, itemsPerPage);

动态渲染分页控件

创建一个分页导航控件，允许用户在不同页面间切换。

function renderPagination(totalItems, itemsPerPage, currentPage) {
  const totalPages = Math.ceil(totalItems / itemsPerPage);
  let paginationHTML = '<div class="pagination">';

  for (let i = 1; i <= totalPages; i++) {
    paginationHTML += `<button class="${i === currentPage ? 'active' : ''}" onclick="changePage(${i})">${i}</button>`;
  }

  paginationHTML += '</div>';
  document.getElementById('pagination').innerHTML = paginationHTML;
}

function changePage(page) {
  currentPage = page;
  updatePageData();
}

使用现有库实现

可以考虑使用现有的JavaScript库来简化分页实现，如DataTables或Paginathing。

// 使用jQuery Paginathing插件示例
$('#data-container').paginathing({
  perPage: 5,
  containerClass: 'panel-footer',
  pageNumbers: true
});

无限滚动分页

对于移动端或需要流畅体验的场景，可以实现无限滚动分页。

window.addEventListener('scroll', () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
    if (!isLoading) {
      loadMoreData();
    }
  }
});

function loadMoreData() {
  currentPage++;
  fetchPageData(currentPage);
}

服务器端分页结合前端处理

当数据量较大时，建议结合后端分页，前端只处理分页逻辑和UI。

async function fetchPaginatedData(page, size) {
  const response = await fetch(`/api/data?page=${page}&size=${size}`);
  const result = await response.json();
  displayData(result.data);
  updatePagination(result.total, page, size);
}

分页样式建议

分页控件通常需要配合CSS样式来提升用户体验：

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

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

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

实现前端分页时需要考虑性能因素，特别是处理大量数据时。对于超过1000条记录的情况，建议采用服务器端分页而非纯前端分页。

前端实现分页功能js