Создайте компонент пагинации | Руководство по JavaScript

Введение

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

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

Демонстрация компонента пагинации

🎯 Задачи

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

Как реализовать функцию ajax для обработки запросов на данные и получения данных для текущей страницы и общего количества страниц.
Как реализовать функцию initEvents для привязки событий к кнопкам компонента пагинации.
Как реализовать функцию createPaginationIndexArr для генерации массива пагинации на основе аргументов функции.
Как реализовать функцию renderPagination для генерации строкового шаблона для компонента пагинации.
Как отображать содержимое в зависимости от текущей страницы.

🏆 Достижения

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

Создать повторно используемый компонент пагинации на JavaScript.
Использовать Axios для отправки HTTP-запросов и обработки данных ответа.
Генерировать массив пагинации на основе текущей страницы, общего количества страниц и максимального количества кнопок страниц для отображения.
Обновлять компонент пагинации и содержимое в зависимости от текущей страницы.

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

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

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

├── css
│   └── index.css
├── index.html
└── js
    ├── data.json
    ├── axios.min.js
    ├── util.js
    └── index.js

где:

css/index.css - файл стилей CSS.
index.html - главная страница.
js/data.json - JSON-файл, в котором хранятся данные.
js/axios.min.js - файл axios.
js/index.js - файл, который необходимо завершить.
js/util.js - файл, в котором хранятся вспомогательные функции.

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

Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, чтобы увидеть страницу.

Начальный эффект

Реализация функции ajax

В этом шаге вы реализуете функцию ajax в файле js/index.js для обработки запроса на данные.

Откройте файл js/index.js.
Найдите функцию ajax и завершите ее реализацию.
Функция ajax должна получать данные для текущей страницы и общее количество страниц на основе аргументов функции и возвращать их.
Вы можете использовать предоставленную библиотеку Axios для отправки HTTP-запроса к файлу ./js/data.json.

Вот полная функция ajax:

async function ajax({
  url,
  method = "get",
  data,
  query: { currentPage, pageSize }
}) {
  // TODO: Получить данные текущей страницы в соответствии с параметрами функции `query` объектом `currentPage, pageSize`.
  let result = {
    data: [],
    total: 0
  };

  let resData = [];
  let res = await axios[method](url, data);
  if (res.status === 200) {
    resData = res.data.data;
    result.total = res.data.total;
  }
  result.data = resData.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );

  return result;
}

Реализация функции initEvents

В этом шаге вы реализуете функцию initEvents в файле js/index.js, которая привязывает события к кнопкам компонента пагинации.

Откройте файл js/index.js.
Найдите функцию initEvents и завершите ее реализацию.
При нажатии на кнопку "<" значение this.currentPage должно уменьшаться на 1, с минимальным значением 1.
При нажатии на кнопку ">" значение this.currentPage должно увеличиваться на 1, с максимальным значением this.totalPages.
При изменении значения this.currentPage компонент пагинации на странице должен обновляться соответственно.

Вот полная функция initEvents:

initEvents() {
    this.root.querySelector("#btn-prev").addEventListener("click", () => {
      // TODO: Событие нажатия для кнопки "<", this.currentPage - 1 при нажатии.
      if (this.currentPage > 1) {
        this.currentPage--;
        this.initPagination();
      }
    });
    this.root.querySelector("#btn-next").addEventListener("click", () => {
      // TODO: Событие нажатия для кнопки ">", this.currentPage + 1 при нажатии.
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.initPagination();
      }
    });
    this.root.querySelector(".pager").addEventListener("click", (e) => {
      if (e.target.nodeName.toLowerCase() === "li") {
        if (this.currentPage === e.target.innerText) return;
        if (e.target.classList.contains("more")) return;
        this.currentPage = Number(e.target.innerText);
      }
      this.initPagination();
    });
  }

Реализация функции createPaginationIndexArr

В этом шаге вы реализуете функцию createPaginationIndexArr в файле js/util.js, которая генерирует массив пагинации (indexArr) на основе аргументов функции согласно определенным правилам.

Откройте файл js/util.js.
Найдите функцию createPaginationIndexArr и завершите ее реализацию.
Функция должна генерировать массив пагинации (indexArr) на основе переданных параметров currentPage, totalPages и pagerCount.
Правила генерации массива пагинации следующие:
- Особый случай: totalPages <= pagerCount
- Обычный случай: totalPages > pagerCount
Сгенерированный indexArr должен соответствовать примерам, приведенным в описании задачи.

Вот полная функция createPaginationIndexArr:

const createPaginationIndexArr = (currentPage, totalPages, pagerCount) => {
  let indexArr = [];
  // TODO: Сгенерировать массив для пагинации на основе переданных параметров indexArr.
  indexArr[0] = 1;
  if (totalPages <= pagerCount) {
    for (let i = 1; i < totalPages; i++) {
      indexArr.push(i + 1);
    }
  } else {
    indexArr[pagerCount - 1] = totalPages;
    if (currentPage <= pagerCount - 2) {
      for (let i = 1; i < pagerCount - 1; i++) {
        indexArr[i] = i + 1;
      }
    } else if (currentPage <= totalPages - pagerCount + 2) {
      let j = 1;
      for (
        let i = -Math.ceil((pagerCount - 3) / 2);
        i <= Math.floor((pagerCount - 3) / 2);
        i++
      ) {
        indexArr[j++] = currentPage + i;
      }
    } else {
      let j = 1;
      for (let i = totalPages - pagerCount + 2; i < totalPages; i++) {
        indexArr[j++] = i;
      }
    }
  }

  return indexArr;
};

Реализация функции renderPagination

В этом шаге вы реализуете функцию renderPagination в файле js/index.js, которая генерирует строковый шаблон template для компонента пагинации на основе массива indexArr.

Откройте файл js/index.js.
Найдите функцию renderPagination и завершите ее реализацию.
Функция должна генерировать строковый шаблон template для компонента пагинации на основе массива indexArr, согласно правилам, описанным в описании задачи.
Сгенерированный template должен быть вставлен в HTML-структуру компонента пагинации с использованием this.root.innerHTML.

Вот полная функция renderPagination:

renderPagination(indexArr) {
  let template = "";
  // TODO: Генерирует строковый шаблон template для компонента пагинации на основе массива indexArr.
  template = indexArr.reduce((prev, next, index) => {
    if (indexArr[index] - indexArr[index - 1] > 1) {
      prev += `<li class="number more">...</li>`;
      prev += `<li class="number ${
        this.currentPage == next? "active" : ""
      }">${next}</li>`;
    } else {
      prev += `<li class="number ${
        this.currentPage == next? "active" : ""
      }">${next}</li>`;
    }
    return prev;
  }, "");

  this.root.innerHTML = `
      <div class="pagination">
          <div class="btn btn-left" id="btn-prev">&lt;</div>
          <ul class="pager">${template} </ul>
          <div class="btn btn-right" id="btn-next">&gt;</div>
      </div>`;
}

Тестирование компонента пагинации

В этом шаге вы будете тестировать окончательный результат компонента пагинации.

Сохраните файлы js/index.js и js/util.js.
Обновите веб-страницу в браузере.
Проверьте эффект страницы.

Поздравляем! Вы завершили реализацию компонента пагинации. Финальный эффект страницы должен быть таким:

Image Description

Резюме

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

Создание повторно используемого компонента пагинации