Funcionalidade de Paginação | Desenvolvimento Web Front-End | Visão Geral do Curso

Introdução

Neste projeto, você aprenderá como implementar a funcionalidade de paginação para uma lista de cursos. A paginação é um recurso essencial no desenvolvimento web front-end, e este projeto irá guiá-lo através do processo de obtenção de dados de um arquivo JSON, exibindo os dados em um formato paginado e lidando com a funcionalidade de página anterior e próxima.

👀 Pré-visualização

Demonstração da funcionalidade de paginação

🎯 Tarefas

Neste projeto, você aprenderá:

Como obter dados de um arquivo JSON usando a biblioteca Axios
Como exibir os dados do curso em um formato paginado, com 5 itens por página
Como implementar a funcionalidade para os botões de página anterior e próxima
Como desabilitar os botões de página anterior e próxima quando apropriado (primeira e última página)
Como atualizar a exibição da paginação para mostrar o número da página atual e o número total de páginas

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Obter dados de um arquivo JSON usando Axios
Implementar a funcionalidade de paginação para uma lista de cursos
Lidar com as interações do usuário com os botões de página anterior e próxima
Desabilitar condicionalmente os botões com base na página atual
Atualizar a interface do usuário (UI) para exibir a página atual e o total de páginas

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

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

Nesta estrutura:

css/bootstrap.css é o arquivo de estilo Bootstrap usado no projeto.
index.html é a página web principal.
js/carlist.json é o arquivo de dados necessário para a requisição.
js/axios.js é o arquivo axios usado para a requisição.
js/index.js é o arquivo JavaScript que precisa ser completado.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página. O efeito é o seguinte:

Efeito Inicial

Obter Dados do Arquivo JSON

Nesta etapa, você aprenderá como obter dados do arquivo carlist.json e armazená-los na variável data.

Localize o arquivo js/index.js e encontre o comentário // TODO: Requesting data from the carlist.json file.
Use o método axios.get() para obter os dados do arquivo ./js/carlist.json.
Assim que os dados forem obtidos, armazene-os na variável data.
Calcule o número máximo de páginas dividindo o número total de itens pelo número de itens por página (5). Armazene este valor na variável maxPage.
Chame a função showPagination() e passe maxPage e pageNum (que é definido como 1 por padrão) como argumentos para exibir o número da página atual e o número total de páginas.
Chame a função getPageData() e passe data como argumento para obter os dados da primeira página (itens 1-5). Armazene isso na variável pageData.
Chame a função renderHtml() e passe pageData como argumento para renderizar o HTML da primeira página.

Seu código deve ser semelhante a este:

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);
});

Implementar a Funcionalidade da Página Anterior

Nesta etapa, você aprenderá como implementar a funcionalidade para o botão da página anterior.

Localize o manipulador de eventos de clique para o botão da página anterior (prev.onclick).
Dentro do manipulador de eventos, primeiro remova a classe disabled do botão da próxima página (next.classList.remove("disabled")).
Decremente a variável pageNum em 1 para ir para a página anterior.
Se pageNum for menor ou igual a 1, isso significa que estamos na primeira página, então adicione a classe disabled ao botão da página anterior (this.classList.add("disabled")) e defina pageNum como 1.
Chame a função showPagination() e passe maxPage e pageNum como argumentos para atualizar a exibição da paginação.
Chame a função getPageData() e passe data como argumento para obter os dados da página atual. Armazene isso na variável pageData.
Chame a função renderHtml() e passe pageData como argumento para renderizar o HTML da página atual.

Seu código deve ser semelhante a este:

// 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);
};

Implementar a Funcionalidade da Próxima Página

Nesta etapa, você aprenderá como implementar a funcionalidade para o botão da próxima página.

Localize o manipulador de eventos de clique para o botão da próxima página (next.onclick).
Dentro do manipulador de eventos, primeiro remova a classe disabled do botão da página anterior (prev.classList.remove("disabled")).
Incremente a variável pageNum em 1 para ir para a próxima página.
Se pageNum for maior ou igual a maxPage, isso significa que estamos na última página, então adicione a classe disabled ao botão da próxima página (this.classList.add("disabled")) e defina pageNum como maxPage.
Chame a função showPagination() e passe maxPage e pageNum como argumentos para atualizar a exibição da paginação.
Chame a função getPageData() e passe data como argumento para obter os dados da página atual. Armazene isso na variável pageData.
Chame a função renderHtml() e passe pageData como argumento para renderizar o HTML da página atual.

Seu código deve ser semelhante a este:

// 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);
};

Agora, você concluiu a implementação da funcionalidade de paginação para a lista de cursos. Você pode testar a funcionalidade clicando nos botões da página anterior e da próxima página para ver os dados do curso sendo exibidos corretamente.

Um gif de todas as funções concluídas é o seguinte:

Completed Effect