JavaScript分页|极客笔记

JavaScript分页

分页是Web开发中常见的功能之一，用于将大量数据拆分成多个页面展示，从而提升用户体验。在本文中，我们将介绍如何使用JavaScript实现分页功能。

原理

分页的原理很简单，就是将大数据集按照每页显示的条目数量进行拆分，然后根据用户点击的页码展示相应的数据。通常，分页功能包括上一页、下一页、首页、尾页和页码按钮。

实现

我们可以通过JavaScript来实现分页功能。下面是一个简单的分页控件的代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>分页示例</title>
  <style>
    .pagination {
      display: flex;
      list-style: none;
    }
    .page-item {
      margin-right: 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="pagination"></div>
  <ul class="pagination" id="pagination-list"></ul>

  <script>
    const itemsPerPage = 5;
    const data = Array.from({ length: 30 }, (_, i) => `Item ${i + 1}`);

    function renderPage(pageNumber) {
      const startIndex = (pageNumber - 1) * itemsPerPage;
      const endIndex = startIndex + itemsPerPage;
      const currentPageData = data.slice(startIndex, endIndex);

      const paginationList = document.getElementById('pagination-list');
      paginationList.innerHTML = '';

      currentPageData.forEach(item => {
        const li = document.createElement('li');
        li.innerText = item;
        paginationList.appendChild(li);
      });
    }

    function renderPagination() {
      const paginationElement = document.getElementById('pagination');
      const totalPages = Math.ceil(data.length / itemsPerPage);

      for (let i = 1; i <= totalPages; i++) {
        const pageItem = document.createElement('li');
        pageItem.innerText = i;
        pageItem.classList.add('page-item');
        pageItem.addEventListener('click', () => renderPage(i));

        paginationElement.appendChild(pageItem);
      }
    }

    renderPagination();
    renderPage(1);
  </script>
</body>
</html>

在上面的示例中，我们定义了一个itemsPerPage常量来表示每页显示的条目数量，data数组用来存储我们的数据。通过renderPagination函数来渲染分页按钮，通过renderPage函数来展示相应页码的数据。

当用户点击不同的页码按钮时，我们会根据页码来重新渲染数据。