用 30 秒在前端页面轻松实现分页功能

在前端开发中，我们经常需要在页面上展示大量的数据，比如一个电商网站上的产品列表，或者是一个博客网站上的文章列表。当数据量很大时，为了避免页面加载缓慢或卡顿，我们会使用分页功能来将数据分批次加载到页面上。

分页功能的实现并不复杂，我们可以使用 HTML、CSS 和 JavaScript 等技术来实现。下面，我们就来一步一步地讲解如何使用 30 秒在前端页面实现分页功能。

首先，我们需要在 HTML 中创建一个容器元素来容纳分页器。这个容器元素可以是一个<nav>元素或<ul>元素。

<nav class="pagination">
  <!-- 分页链接 -->
</nav>

接下来，我们需要使用 CSS 来设置分页器的样式。我们可以使用 flexbox 或 grid 来实现分页器的布局，并使用一些简单的 CSS 属性来设置分页器中各个元素的样式。

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination li {
  list-style-type: none;
  margin: 0 5px;
}

.pagination li a {
  padding: 5px 10px;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #333;
}

.pagination li a:hover {
  background-color: #eee;
}

.pagination li.active a {
  background-color: #007bff;
  color: #fff;
}

然后，我们需要使用 JavaScript 来实现分页功能的逻辑。我们可以使用 JavaScript 来获取后端返回的数据，并将其分批次加载到页面上。我们还可以使用 JavaScript 来控制分页器的显示和隐藏。

// 获取后端返回的数据
const data = [
  // 数据对象
];

// 每页显示的数据条数
const pageSize = 10;

// 当前页码
let currentPage = 1;

// 总页数
const totalPages = Math.ceil(data.length / pageSize);

// 创建分页器
const pagination = document.querySelector('.pagination');

// 创建上一页按钮
const prevButton = document.createElement('li');
prevButton.classList.add('page-item');
prevButton.innerHTML = `<a class="page-link" href="#">上一页</a>`;

// 创建下一页按钮
const nextButton = document.createElement('li');
nextButton.classList.add('page-item');
nextButton.innerHTML = `<a class="page-link" href="#">下一页</a>`;

// 创建页码列表
const pageList = document.createElement('ul');
pageList.classList.add('pagination');

// 创建页码按钮
for (let i = 1; i <= totalPages; i++) {
  const pageItem = document.createElement('li');
  pageItem.classList.add('page-item');
  const pageLink = document.createElement('a');
  pageLink.classList.add('page-link');
  pageLink.href = `#page-${i}`;
  pageLink.innerHTML = i;
  pageItem.appendChild(pageLink);
  pageList.appendChild(pageItem);
}

// 将分页器添加到页面中
pagination.appendChild(prevButton);
pagination.appendChild(pageList);
pagination.appendChild(nextButton);

// 添加分页器事件监听器
pagination.addEventListener('click', (e) => {
  // 获取点击的元素
  const target = e.target;

  // 如果点击的是上一页按钮
  if (target.classList.contains('prev-page')) {
    // 当前页码减 1
    currentPage--;

    // 重新加载数据
    loadData(currentPage);
  }

  // 如果点击的是下一页按钮
  else if (target.classList.contains('next-page')) {
    // 当前页码加 1
    currentPage++;

    // 重新加载数据
    loadData(currentPage);
  }

  // 如果点击的是页码按钮
  else if (target.classList.contains('page-link')) {
    // 获取点击的页码
    const page = parseInt(target.innerHTML);

    // 当前页码等于点击的页码
    currentPage = page;

    // 重新加载数据
    loadData(currentPage);
  }
});

// 加载数据
function loadData(page) {
  // 获取当前页码的数据
  const start = (page - 1) * pageSize;
  const end = start + pageSize;
  const currentPageData = data.slice(start, end);

  // 将数据渲染到页面上
  // ...

  // 更新分页器中的当前页码
  const current