当前位置：首页 > JavaScript

js分页实现

2026-02-28 21:38:53JavaScript

分页实现的基本原理

分页功能通常涉及前端和后端的协作。前端负责展示分页控件和处理用户交互，后端负责提供分页数据。核心参数包括当前页码（page）和每页数据量（size）。

前端分页控件实现

创建分页导航栏，包含页码按钮、上一页和下一页按钮。通过事件监听响应用户点击，动态更新当前页码并重新加载数据。

// 分页控件示例
function renderPagination(totalPages, currentPage) {
  const pagination = document.getElementById('pagination');
  pagination.innerHTML = '';

  // 上一页按钮
  const prevBtn = document.createElement('button');
  prevBtn.textContent = '上一页';
  prevBtn.disabled = currentPage === 1;
  prevBtn.addEventListener('click', () => loadData(currentPage - 1));
  pagination.appendChild(prevBtn);

  // 页码按钮
  for (let i = 1; i <= totalPages; i++) {
    const pageBtn = document.createElement('button');
    pageBtn.textContent = i;
    pageBtn.disabled = i === currentPage;
    pageBtn.addEventListener('click', () => loadData(i));
    pagination.appendChild(pageBtn);
  }

  // 下一页按钮
  const nextBtn = document.createElement('button');
  nextBtn.textContent = '下一页';
  nextBtn.disabled = currentPage === totalPages;
  nextBtn.addEventListener('click', () => loadData(currentPage + 1));
  pagination.appendChild(nextBtn);
}

数据加载与展示

通过AJAX或Fetch API从后端获取分页数据，并更新页面内容。需要处理分页参数和响应数据。

// 加载分页数据示例
function loadData(page = 1, size = 10) {
  fetch(`/api/data?page=${page}&size=${size}`)
    .then(response => response.json())
    .then(data => {
      renderTable(data.items); // 渲染数据表格
      renderPagination(data.totalPages, page); // 更新分页控件
    })
    .catch(error => console.error('加载数据失败:', error));
}

后端API设计

后端接口需要接收分页参数，并返回对应的数据及分页信息。常见响应格式包括数据列表和分页元数据。

// 伪代码：Node.js后端分页处理
app.get('/api/data', (req, res) => {
  const page = parseInt(req.query.page) || 1;
  const size = parseInt(req.query.size) || 10;
  const offset = (page - 1) * size;

  // 模拟数据库查询
  const totalItems = 100; // 总数据量
  const items = getDataFromDB(offset, size); // 获取分页数据
  const totalPages = Math.ceil(totalItems / size);

  res.json({
    items,
    totalPages,
    currentPage: page
  });
});

纯前端分页实现

对于少量数据，可以在前端一次性加载所有数据，然后进行分页处理。

// 纯前端分页示例
function paginateFrontend(data, page, size) {
  const start = (page - 1) * size;
  const end = start + size;
  return data.slice(start, end);
}

// 使用示例
const allData = [...]; // 所有数据
const currentPage = 1;
const pageSize = 10;
const pageData = paginateFrontend(allData, currentPage, pageSize);
renderTable(pageData);
renderPagination(Math.ceil(allData.length / pageSize), currentPage);

分页样式优化

使用CSS美化分页控件，提高用户体验。可以添加活动状态、悬停效果等样式。

/* 分页控件样式 */
#pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

#pagination button:hover:not(:disabled) {
  background: #f0f0f0;
}

#pagination button:disabled {
  color: #999;
  cursor: not-allowed;
}

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

分页性能优化

对于大数据量分页，可以采用虚拟滚动或懒加载技术，减少DOM操作和内存占用。

js分页实现

// 虚拟滚动分页示例
window.addEventListener('scroll', () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
    loadMoreData(); // 加载更多数据
  }
});