Реализация пагинации с использованием Axios

Введение

В этом проекте вы научитесь реализовывать функциональность пагинации для списка курсов. Пагинация является важной функцией в фронтенд-разработке веб-приложений, и этот проект приведет вас пошагово через процесс получения данных из JSON-файла, отображения данных в виде страниц и обработки функциональности кнопок "Предыдущая" и "Следующая" страницы.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• Получать данные из JSON-файла с использованием библиотеки Axios
• Отображать данные о курсах в виде страниц, по 5 элементов на каждой странице
• Реализовывать функциональность кнопок "Предыдущая" и "Следующая" страницы
• Отключать кнопки "Предыдущая" и "Следующая" страницы при необходимости (на первой и последней странице)
• Обновлять отображение пагинации, чтобы показать текущий номер страницы и общее количество страниц

🏆 Достижения

После завершения этого проекта вы сможете:

• Получать данные из JSON-файла с использованием Axios
• Реализовывать функциональность пагинации для списка курсов
• Обрабатывать взаимодействия пользователя с кнопками "Предыдущая" и "Следующая" страницы
• Условно отключать кнопки в зависимости от текущей страницы
• Обновлять пользовательский интерфейс для отображения текущей страницы и общего количества страниц

Skills Graph

Настройка структуры проекта

На этом этапе вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот этап:

Откройте папку проекта. Структура каталогов выглядит следующим образом:

├── 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-файл, который нужно завершить.

Нажмите кнопку Go Live в правом нижнем углу WebIDE, чтобы запустить проект.

Затем откройте "Web 8080" в верхней части виртуальной машины и вручную обновите страницу, и вы увидите страницу. Эффект выглядит следующим образом:

Получение данных из JSON-файла

На этом этапе вы научитесь получать данные из файла carlist.json и сохранять их в переменной data.

1. Найдите файл js/index.js и найдите комментарий // TODO: Requesting data from the carlist.json file.
2. Используйте метод axios.get() для получения данных из файла ./js/carlist.json.
3. После получения данных сохраните их в переменной data.
4. Вычислите максимальное количество страниц, разделив общее количество элементов на количество элементов на странице (5). Сохраните это значение в переменной maxPage.
5. Вызовите функцию showPagination() и передайте в качестве аргументов maxPage и pageNum (которое по умолчанию установлено в 1), чтобы отобразить текущий номер страницы и общее количество страниц.
6. Вызовите функцию getPageData() и передайте в качестве аргумента data, чтобы получить данные для первой страницы (элементы 1 - 5). Сохраните это в переменной pageData.
7. Вызовите функцию 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);
});

Реализация функциональности кнопки "Предыдущая страница"

На этом этапе вы научитесь реализовывать функциональность кнопки "Предыдущая страница".

1. Найдите обработчик события клика для кнопки "Предыдущая страница" (prev.onclick).
2. Внутри обработчика события сначала удалите класс disabled у кнопки "Следующая страница" (next.classList.remove("disabled")).
3. Уменьшите значение переменной pageNum на 1, чтобы перейти на предыдущую страницу.
4. Если значение pageNum меньше или равно 1, это означает, что мы находимся на первой странице, поэтому добавьте класс disabled к кнопке "Предыдущая страница" (this.classList.add("disabled")) и установите значение pageNum равным 1.
5. Вызовите функцию showPagination() и передайте в качестве аргументов maxPage и pageNum, чтобы обновить отображение пагинации.
6. Вызовите функцию getPageData() и передайте в качестве аргумента data, чтобы получить данные для текущей страницы. Сохраните это в переменной pageData.
7. Вызовите функцию renderHtml() и передайте в качестве аргумента pageData, чтобы отрендерить HTML для текущей страницы.

Ваш код должен выглядеть следующим образом:

// Click on the previous page
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);
};

Реализация функциональности кнопки "Следующая страница"

На этом этапе вы научитесь реализовывать функциональность кнопки "Следующая страница".

1. Найдите обработчик события клика для кнопки "Следующая страница" (next.onclick).
2. Внутри обработчика события сначала удалите класс disabled у кнопки "Предыдущая страница" (prev.classList.remove("disabled")).
3. Увеличьте значение переменной pageNum на 1, чтобы перейти на следующую страницу.
4. Если значение pageNum больше или равно maxPage, это означает, что мы находимся на последней странице, поэтому добавьте класс disabled к кнопке "Следующая страница" (this.classList.add("disabled")) и установите значение pageNum равным maxPage.
5. Вызовите функцию showPagination() и передайте в качестве аргументов maxPage и pageNum, чтобы обновить отображение пагинации.
6. Вызовите функцию getPageData() и передайте в качестве аргумента data, чтобы получить данные для текущей страницы. Сохраните это в переменной pageData.
7. Вызовите функцию renderHtml() и передайте в качестве аргумента pageData, чтобы отрендерить HTML для текущей страницы.

Ваш код должен выглядеть следующим образом:

// Click on the next page
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);
};

Теперь вы завершили реализацию функциональности пагинации для списка курсов. Вы можете протестировать функциональность, нажимая на кнопки "Предыдущая" и "Следующая" страницы, чтобы убедиться, что данные о курсах отображаются корректно.

GIF-анимация с выполненными функциями выглядит следующим образом:

Итог

Поздравляем! Вы завершили этот проект. Вы можете выполнять больше лабораторных работ в LabEx, чтобы улучшить свои навыки.