分页功能 | 前端网页开发 | 课程概述

介绍

在本项目中，你将学习如何为课程列表实现分页功能。分页是前端网页开发中的一项重要功能，本项目将指导你完成从 JSON 文件中获取数据、以分页格式显示数据以及处理上一页和下一页功能的过程。

👀 预览

分页功能演示

🎯 任务

在本项目中，你将学习：

如何使用 Axios 库从 JSON 文件中获取数据
如何以分页格式显示课程数据，每页显示 5 条数据
如何实现上一页和下一页按钮的功能
如何在适当的时候（第一页和最后一页）禁用上一页和下一页按钮
如何更新分页显示以显示当前页码和总页数

🏆 成果

完成本项目后，你将能够：

使用 Axios 从 JSON 文件中获取数据
为课程列表实现分页功能
处理用户与上一页和下一页按钮的交互
根据当前页面有条件地禁用按钮
更新用户界面以显示当前页面和总页数

设置项目结构

在这一步中，你将设置项目文件和结构。按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

├── css
│   └── bootstrap.css
├── index.html
└── js
    ├── axios.js
    ├── carlist.json
    └── index.js

在此结构中：

css/bootstrap.css 是项目中使用的 Bootstrap 样式文件。
index.html 是主网页。
js/carlist.json 是请求所需的数据文件。
js/axios.js 是用于请求的 axios 文件。
js/index.js 是需要完成的 JavaScript 文件。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，在虚拟机顶部打开“Web 8080”并手动刷新，你将看到页面。效果如下：

初始效果

从 JSON 文件中获取数据

在这一步中，你将学习如何从 carlist.json 文件中获取数据并将其存储在 data 变量中。

找到 js/index.js 文件，并找到 // TODO: Requesting data from the carlist.json file 注释。
使用 axios.get() 方法从 ./js/carlist.json 文件中获取数据。
数据获取成功后，将其存储在 data 变量中。
通过将项目总数除以每页显示的项目数（5）来计算最大页数。将此值存储在 maxPage 变量中。
调用 showPagination() 函数，并将 maxPage 和 pageNum（默认设置为 1）作为参数传递，以显示当前页码和总页数。
调用 getPageData() 函数，并将 data 作为参数传递，以获取第一页的数据（项目 1 - 5）。将其存储在 pageData 变量中。
调用 renderHtml() 函数，并将 pageData 作为参数传递，以渲染第一页的 HTML。

你的代码应该如下所示：

let data;
let pageData;
// TODO: Requesting data from the carlist.json file
axios.get("./js/carlist.json").then((res) => {
  data = res.data;
  maxPage = Math.ceil(data.length / 5);
  showPagination(maxPage, pageNum);
  pageData = getPageData(data);
  renderHtml(pageData);
});

实现上一页功能

在这一步中，你将学习如何实现上一页按钮的功能。

找到上一页按钮的点击事件处理程序（prev.onclick）。
在事件处理程序内部，首先从下一页按钮中移除 disabled 类（next.classList.remove("disabled")）。
将 pageNum 变量减 1，以切换到上一页。
如果 pageNum 小于或等于 1，这意味着我们处于第一页，因此将 disabled 类添加到上一页按钮（this.classList.add("disabled")），并将 pageNum 设置为 1。
调用 showPagination() 函数，并将 maxPage 和 pageNum 作为参数传递，以更新分页显示。
调用 getPageData() 函数，并将 data 作为参数传递，以获取当前页面的数据。将其存储在 pageData 变量中。
调用 renderHtml() 函数，并将 pageData 作为参数传递，以渲染当前页面的 HTML。

你的代码应该如下所示：

// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {
  // TODO
  next.classList.remove("disabled");
  pageNum--;
  if (pageNum <= 1) {
    this.classList.add("disabled");
    pageNum = 1;
  }
  showPagination(maxPage, pageNum);
  pageData = getPageData(data);
  renderHtml(pageData);
};

实现下一页功能

在这一步中，你将学习如何实现下一页按钮的功能。

找到下一页按钮的点击事件处理程序（next.onclick）。
在事件处理程序内部，首先从前一页按钮中移除 disabled 类（prev.classList.remove("disabled")）。
将 pageNum 变量加 1，以切换到下一页。
如果 pageNum 大于或等于 maxPage，这意味着我们处于最后一页，因此将 disabled 类添加到下一页按钮（this.classList.add("disabled")），并将 pageNum 设置为 maxPage。
调用 showPagination() 函数，并将 maxPage 和 pageNum 作为参数传递，以更新分页显示。
调用 getPageData() 函数，并将 data 作为参数传递，以获取当前页面的数据。将其存储在 pageData 变量中。
调用 renderHtml() 函数，并将 pageData 作为参数传递，以渲染当前页面的 HTML。

你的代码应该如下所示：

// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {
  // TODO
  prev.classList.remove("disabled");
  pageNum++;
  if (pageNum >= maxPage) {
    this.classList.add("disabled");
    pageNum = maxPage;
  }
  showPagination(maxPage, pageNum);
  pageData = getPageData(data);
  renderHtml(pageData);
};

现在，你已经完成了课程列表分页功能的实现。你可以通过点击上一页和下一页按钮来测试功能，以查看课程数据是否正确显示。

所有功能完成后的动图如下：

完成效果