Web基础应用：手把手教你如何使用 HTML、CSS 和 JavaScript 实现分页

在网络上，分页是将大块内容分解成更小的块的一种方法。在本文中，我们将介绍一种使用 HTML、CSS 和普通 JavaScript 将内容划分为一系列“页面”的简单方法。

虽然分页可以使用 React 和 Angular 等框架来实现，但本文的目的是提供一个简单、分步的分页设置指南，以便我们能够理解所涉及的基本概念。

创建我们的基本网页

在实现我们的分页系统之前，让我们创建一个 HTML 结构来存储我们想要显示的内容。这可以是任何类型的内容，但在本教程中，我们将使用一个 5 列 15 行的表来存储不同年级学生的姓名。这是我们的 HTML 片段：

<article class="content">
  <table>
    <thead>
      <tr>
        <th>Grade 1</th>
        <th>Grade 2</th>
        <th>Grade 3</th>
        <th>Grade 4</th>
        <th>Grade 5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Faith Andrew</td>
        <td>Angela Christopher`</td>
        <td>David Elias</td>
        <td>Samuel Thomas</td>
        <td>Richard Elias</td>
      </tr>
      ⋮
    </tbody>
  </table>
</article>

我们已将表格包装在容器元素 ( <article class="content">) 中。虽然我们并不严格需要容器元素，但拥有它很方便，特别是当我们的页面上还有其他元素时。（它为我们将添加的分页按钮提供了有用的上下文。）

您可以在CodePen上查看我们完整的 HTML 代码以及一些样式。

使用 JavaScript 实现分页功能

HTML 和 CSS 就位后，下一步就是实现分页。我们首先使用 JavaScript 将表格划分为不同的“页面”，并添加用于导航这些页面的按钮功能。

创建一个将表格分为页面的函数

这是我们将表分成单独部分的代码：

document.addEventListener('DOMContentLoaded', function () {
  const content = document.querySelector('.content');
  const itemsPerPage = 5;
  let currentPage = 0;
  const items = Array.from(content.getElementsByTagName('tr')).slice(1);

第一行创建一个事件侦听器，确保 JavaScript 代码在 HTML 内容完全加载和解析后运行。这是为了防止在内容在 DOM 中可用之前对元素进行任何操作或交互。

使用document.querySelector('.content')，我们选择<article class="content">包装器并将其初始化为变量。

使用const itemsPerPage = 5;，我们可以设置每页上显示的行数。

使用let currentPage = 0;，我们创建一个变量来跟踪当前页码。它从 0 开始，代表第一页。（JavaScript 中的第一个索引是 0，因此它从 0 开始计数，而不是从 1 开始。）

最后一行使用该getElementsByTagName方法选择<tr>表中带有标签的所有元素。我们创建一个包含items所有子元素的数组 ( )，并使用slice(1)排除第一行（标题）并创建一个包含其余行的数组。

这意味着当我们切换页面时标题将保持不变。

开发 showPage() 功能

接下来，我们来编写显示页面的代码：

function showPage(page) {
  const startIndex = page * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  items.forEach((item, index) => {
    item.classList.toggle('hidden', index < startIndex || index >= endIndex);
  });
  updateActiveButtonStates();
}

我们首先创建一个showPage()接受page参数的函数。该函数负责在调用时显示连接到该特定页面的项目。

接下来，我们startIndex通过将 page 参数乘以 来计算 ，它是当前页面上应显示的第一个项目itemsPerPage。我们还计算endIndex紧随当前页面上应显示的最后一项之后的 。

通过这样做，我们创建了一系列要显示的项目。例如，假设我们有十个项目，我们希望每页显示五个项目。如果我们位于第一页 (page = 0)，startIndex则为 0，并且endIndex为 0 + 5 = 5。此范围 ([0, 5]) 包括前五个项目。在下一页 (page = 1) 上，startIndex 将为 5，并且endIndex将为 5 + 5 = 10。此范围 ([5, 10]) 包括其余项目。

使用items.forEach()，我们创建一个循环，迭代每一行并检查其索引是否落在当前页面上显示的项目范围内 - 也就是说，它是否位于 之前或之后/startIndex等于endIndex。如果索引在范围内，toggle关键字会将hidden类（我们将在 CSS 代码中定义）应用于该项目，从而有效地隐藏它。如果索引不满足任一条件，则hidden删除该类，使该项目可见。

我们的hidden类将项目移出屏幕，将它们隐藏起来，但仍然允许使用屏幕阅读器的人访问它们：

.hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

添加按钮

现在让我们看看如何添加导航按钮。在下面的代码中，我们将根据表格的内容创建并添加按钮功能：

function createPageButtons() {
  const totalPages = Math.ceil(items.length / itemsPerPage);
  const paginationContainer = document.createElement('div');
  const paginationDiv = document.body.appendChild(paginationContainer);
  paginationContainer.classList.add('pagination');

首先，我们创建一个createPageButtons()函数来存储创建按钮的逻辑。然后我们计算显示表格所需的总页数。我们通过将项目总数除以每页所需的项目数来实现此目的。使用该函数对结果进行舍入Math.ceil()。这确保了表项的所有行都被可用页面覆盖。

接下来，我们创建一个 div 来包含动态生成的页面按钮 ( document.createElement('div'))。然后我们<div>使用 将该元素附加到 HTML 结构的主体中document.body.appendChild(paginationDiv)。（我们实际上并没有告诉它在 HTML 结构中的位置，是的。我们很快就会这样做。）最后，我们向该按钮容器添加一个类，pagination以便我们可以使用样式来定位它。

下一步是为每个页面创建按钮，使用循环迭代每个可能的页面索引：

for (let i = 0; i < totalPages; i++) {
  const pageButton = document.createElement('button');
  pageButton.textContent = i + 1;
  pageButton.addEventListener('click', () => {
    currentPage = i;
    showPage(currentPage);
    updateActiveButtonStates();
});

循环for范围从 0（即第一页）到总页数减 1。

在每次页面迭代中，使用该方法创建一个新的单独页面按钮document.createElement()，每次循环时将页码增加 1。

接下来，我们创建一个单击事件侦听器并将其附加到页面按钮。单击按钮时，将执行事件侦听器的回调函数。

下面是回调函数的解释：

• 该currentPage变量将更新为 的当前值i，该值对应于单击的页面的索引。

• showPage()使用更新后的值调用该函数currentPage，从而显示单击页面的内容。

为了完成我们的按钮创建代码，我们以此结束：

content.appendChild(paginationContainer);
paginationDiv.appendChild(pageButton);

我们将按钮容器附加到包装器的末尾.content，然后将按钮放置在按钮容器内。

突出显示活动按钮

为了使我们的按钮更加用户友好，我们将为当前“活动”按钮添加独特的样式。让我

function updateActiveButtonStates() {
  const pageButtons = document.querySelectorAll('.pagination button');
  pageButtons.forEach((button, index) => {
    if (index === currentPage) {
      button.classList.add('active');
    } else {
      button.classList.remove('active');
    }
  });
}

首先，我们使用 检索所有分页按钮document.querySelectorAll并将它们分配给pageButtons变量。

然后，该updateActiveButtonStates()函数使用循环逐一遍历每个按钮forEach，并将其索引与变量的值进行比较currentPage。

接下来，如果按钮的索引与当前页面匹配，我们使用条件if语句来分配类的样式。active

如果按钮的索引与当前页面不匹配，active则删除该类。这可确保其他按钮不会保留该类active。

为了实现此功能，updateActiveButtonStates()每当页面更改或显示时我们都会调用该函数。

调用脚本

我们的分页脚本以以下两行结束：

createPageButtons();
showPage(currentPage);

createPageButtons()我们在函数之前调用函数showPage()。这可确保在页面加载后创建按钮。

我们的脚本现在计算每个页面要显示的适当项目范围，侦听按钮单击并更新页面显示。

使我们的代码适应其他场景

我们创建的脚本可以很方便地将表分成一系列页面。但是如果我们的内容不是表格怎么办？让我们尝试使用其他类型的内容来尝试我们的脚本，而不是表格内容。

部分元素的分页

让我们<section>在容器中放置一些元素，而不是表元素，然后看看如何调整我们的脚本。这是我们的基本 HTML：

<article class="content">
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</article>

我们只需要对脚本进行三个非常简单的更改：

document.addEventListener('DOMContentLoaded', function () {
  const content = document.querySelector('.content');
  const itemsPerPage = 1;
  let currentPage = 0;
  const items = Array.from(content.getElementsByTagName('section')).slice(0);

变化是：

• 设置itemsPerPage为 1，以便每页仅显示一个部分

• 将目标标签名称更改为section，因为我们现在循环遍历<section>元素而不是<tr>元素

• 设置slice()为 0，这将选择限制为第一个部分元素（索引为 0）

下面的 CodePen 演示展示了这一点：https://codepen.io/SitePoint/pen/XWoJKMX。

无序列表的分页

我们可以轻松地调整上面的演示以处理项目列表。在下面的示例中，我们将包装元素从 an 更改<article>为 a <ul>，并将<section>elements 更改为<li>elements：

<ul class="content">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

在 JavaScript 中，我们只需进行两处更改：

• getElementsByTagName('section')变成getElementsByTagName('li')

• 让我们设置const itemsPerPage为2每页显示两个列表项

在对无序列表进行一些小的 CSS 更改后，我们最终得到以下结果。演示地址：https://codepen.io/SitePoint/pen/KKbwMyO

结论

在本教程中，我们学习了如何使用 HTML、CSS 和 JavaScript 实现分页。对于那些没有启用 JavaScript 的人（无论出于何种原因），完整的内容仍然可用 - 只是没有分页。通过使用语义<button>元素，页面仍然可以通过键盘访问。我们还通过将非活动内容移出屏幕而不是使用 来隐藏非活动内容display: none，以便屏幕阅读器仍然可以访问它。

我们可以进一步添加描述性 ARIA 标签和属性，以向屏幕阅读器传达分页按钮等元素的用途和作用。

我希望这个演示能让您思考简单的分页功能，而无需使用框架。