当前位置：首页 > JavaScript

js分页实现...

2026-01-31 18:26:54JavaScript

分页实现的基本思路

分页功能通常涉及前端展示和后端数据处理的配合。前端负责显示分页控件和当前页数据，后端负责按需返回指定页码的数据。核心逻辑包括计算总页数、当前页数据范围、分页按钮生成等。

前端分页实现

// 示例数据（实际开发中从API获取）
const allData = [...Array(100).keys()].map(i => ({ id: i, name: `Item ${i}` }));

function paginate(data, currentPage = 1, itemsPerPage = 10) {
  const startIndex = (currentPage - 1) * itemsPerPage;
  return data.slice(startIndex, startIndex + itemsPerPage);
}

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

  if (currentPage > 1) {
    paginationHTML += `<button onclick="changePage(${currentPage - 1})">Previous</button>`;
  }

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

  if (currentPage < totalPages) {
    paginationHTML += `<button onclick="changePage(${currentPage + 1})">Next</button>`;
  }

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

function changePage(page) {
  const paginatedData = paginate(allData, page);
  renderData(paginatedData);
  renderPagination(allData.length, page, 10);
}

function renderData(data) {
  const container = document.getElementById('data-container');
  container.innerHTML = data.map(item => `<div>${item.id}: ${item.name}</div>`).join('');
}

// 初始化
changePage(1);

后端API分页实现

后端通常需要接受page和limit参数，返回分页数据及元信息：

// Express.js 示例
app.get('/api/items', (req, res) => {
  const page = parseInt(req.query.page) || 1;
  const limit = parseInt(req.query.limit) || 10;
  const startIndex = (page - 1) * limit;

  // 假设从数据库获取数据
  Item.find().countDocuments().then(total => {
    return Item.find()
      .skip(startIndex)
      .limit(limit)
      .then(items => {
        res.json({
          data: items,
          meta: {
            total,
            page,
            limit,
            totalPages: Math.ceil(total / limit)
          }
        });
      });
  });
});

分页样式优化

添加基础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;
}