Vanilla JavaScript 中的分页

由柏拉图重新发布

关注： 0

介绍

创建网站或 Web 应用程序时，尤其是当它们具有很多功能时 模板化 内容（例如网格或属于某个类别的项目列表）——通常最好 把它分成几页 以减少一次出现在屏幕上的项目数。

在本文中，我们将从头开始学习如何使用 vanilla JavaScript 在我们的 Web 项目中实现分页。

出于本文的目的，我们将从 Free Introduction 示例 API 响应。它包含 100 个数据点，但我们一次只使用 30 个并在屏幕上显示 6 个帖子。

javascript 动画中的分页

入门

在使用浏览器内置的 Fetch API 从 API 获取所有必需的帖子之前，我们首先需要创建一个基本的 HTML 标记，稍后将通过我们的脚本动态填充该标记：

<div class="container"> <div class="title-section"> <h1 class="title">Posts</h1> </div> <div class="posts-section"></div> <div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul> </div>
</div>

获取 REST API 帖子

如前所述，分页就是将内容分成更小的块。它要求您获取数据，决定何时以及如何拆分，计算页面数量，然后将其中的一部分显示给用户。谢天谢地——后端功能通常会处理前几项任务，并返回相关页面、页面总数和内容每页.

请注意： 根据您使用的特定 API，您可能会也可能不会延迟加载结果。只要有可能——更喜欢延迟加载结果而不是预先加载它们。大多数现代 API 都遵循让您设置 limit or page count，返回可以显示给用户的总页数。

让我们首先获取我们所有的帖子开始，然后我们将修改它以每页只查询几个数据点：

const postsSection = document.querySelector(".posts-section"); const fetchPosts = async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/posts" ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

让我们快速检查上面的代码。首先，我们从获得 div 元素，我们将通过 class 我们分配给的名字 div. 最后，我们编写了一个函数来处理获取操作。

在 fetchPosts() 功能，我们使用了 获取API 从中检索帖子 JSON 占位符帖子 API，然后存储引用的 JSON 数据 posts 变量并使用了 innerHTML 属性将每条内容添加到 posts-section 通过循环遍历它们。

至此，我们已经成功获取了所有内容。

请注意： 您也可以使用不同的方法获取内容，但在我们开始创建分页之前，请确保您的所有内容都已加载到该页面上。

让我们首先声明三个对于在我们的网页中实现分页至关重要的变量。第一个是 每页我们要声明的帖子数，则 当前页码 (1 默认情况下），并且 总页数.

请注意： 当使用标准 API 和数据库中的数据时，总数通常返回页面或数据点。如果我们没有收到总页数，可以通过总对象数和页面大小来计算。

对于本指南，我们将给出 总页数 固定数量的 30:

const numberPerPage = 6;
var pageNumber = 1;
var numberOfPages = 30;

在上一节中，我们在一个页面上显示了所有帖子，但我们希望一次只显示六个。因此，我们设置了 numberPerPage 至 6 我们现在将使用它来调整获取操作，因此它只显示 6 帖子。

这取决于具体的实现，但广泛的做法是允许在从 API 获取结果时使用查询参数，这允许您获取特定的页结果。例如，我们使用的模拟 REST API 允许 page 和 limit 允许您仅加载将在给定时间显示的批次的参数。

这样，我们只加载我们想要显示给用户的数据！然后我们可以预取下一页以加快加载时间，或者陶醉于仅加载要显示的数据所实现的计算加速。

我们将通过修改获取请求来使用这些参数：

const fetchPosts = async (pageNumber) => { const response = await fetch( `https://jsonplaceholder.typicode.com/posts?_page=${pageNumber}&_limit=${numberPerPage}` ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

在上面的代码中，我们将两个参数添加到 API 端点，它们是 pageNumber 和 每页的帖子数 这将帮助我们将帖子分成几页，然后现在可以根据页码显示这些帖子。

此外，我们还通过了 pageNumber 到 fetchPosts() 函数，因此我们可以在页面更改时调用此函数：

javascript分页无导航

现在让我们尝试向页面底部的页面导航按钮添加功能，并让它们根据页码显示适当的内容。

我们会注意到在标记中我们有一个显示分页按钮的部分：

<div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul>
</div>

我们现在要添加 click 为每个按钮添加事件，以便在单击它们时，显示用于该页面的内容。

实施上一页按键

这里的逻辑非常简单。我们所要做的就是检索代表 上一个按钮，添加 click 事件侦听器并在单击按钮时显示适当的内容：

查看我们的 Git 学习实践指南，其中包含最佳实践、行业认可的标准以及随附的备忘单。停止谷歌搜索 Git 命令，实际上学习它！


const prev = document.querySelector('.prev');
prev.addEventListener('click', (e) => { e.preventDefault(); if (pageNumber > 1) { pageNumber--; fetchPosts(pageNumber); }
});

添加一个后 click 事件侦听器，我们检查了当前页码是否大于 1 在回调函数中。如果数量等于或小于 1，我们将继续显示当前内容。但是如果当前页码大于 1 我们可以自由地减少它的价值并调用 fetchPosts(pageNumber) 函数将新页码作为参数传入，因此显示上一页的内容。

实施下一页按键

这里的逻辑与以前按钮，只需进行一些小改动。当然，我们将使用类检索列表元素 next 而不是 prev. 此外，我们将检查当前页码是否小于页数我们设置为 30 手动更早。最后，我们将增加当前页码而不是减少它：


const next = document.querySelector(".next");
next.addEventListener("click", (e) => { e.preventDefault(); if (pageNumber < numberOfPages) { pageNumber++; fetchPosts(pageNumber); }
});