Criar um Componente de Paginação | Tutorial JavaScript

Introdução

Neste projeto, você aprenderá como construir um componente de paginação, um componente comumente usado em aplicações web. O componente de paginação ajuda a reduzir o tempo de consulta no backend e não afeta o desempenho da renderização da página devido ao carregamento excessivo de dados.

👀 Pré-visualização

Demonstração do componente de paginação

🎯 Tarefas

Neste projeto, você aprenderá:

Como implementar a função ajax para lidar com requisições de dados e recuperar os dados da página atual e o número total de páginas.
Como implementar a função initEvents para vincular eventos aos botões do componente de paginação.
Como implementar a função createPaginationIndexArr para gerar um array de paginação com base nos argumentos da função.
Como implementar a função renderPagination para gerar o template de string para o componente de paginação.
Como renderizar o conteúdo com base na página atual.

🏆 Conquistas

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

Construir um componente de paginação reutilizável em JavaScript.
Usar Axios para fazer requisições HTTP e lidar com os dados de resposta.
Gerar um array de paginação com base na página atual, no total de páginas e no número máximo de botões de página a serem exibidos.
Atualizar o componente de paginação e o conteúdo com base na página atual.

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
│   └── index.css
├── index.html
└── js
    ├── data.json
    ├── axios.min.js
    ├── util.js
    └── index.js

Onde:

css/index.css é o arquivo de estilo CSS.
index.html é a página principal.
js/data.json é o arquivo JSON que armazena os dados.
js/axios.min.js é o arquivo axios.
js/index.js é o arquivo a ser completado.
js/util.js é o arquivo que armazena funções utilitárias.

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.

Efeito Inicial

Implementar a Função ajax

Nesta etapa, você implementará a função ajax no arquivo js/index.js para lidar com a requisição de dados.

Abra o arquivo js/index.js.
Localize a função ajax e complete a implementação.
A função ajax deve recuperar os dados da página atual e o número total de páginas com base nos argumentos da função e retorná-los.
Você pode usar a biblioteca Axios fornecida para fazer a requisição HTTP para o arquivo ./js/data.json.

Aqui está a função ajax completa:

async function ajax({
  url,
  method = "get",
  data,
  query: { currentPage, pageSize }
}) {
  // TODO: Obter os dados da página atual de acordo com os parâmetros da função `query` object `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;
}

Implementar a Função initEvents

Nesta etapa, você implementará a função initEvents no arquivo js/index.js, que vincula eventos aos botões do componente de paginação.

Abra o arquivo js/index.js.
Localize a função initEvents e complete a implementação.
Quando o botão "<" for clicado, o valor de this.currentPage deve ser reduzido em 1, com um mínimo de 1.
Quando o botão ">" for clicado, o valor de this.currentPage deve ser aumentado em 1, com um máximo de this.totalPages.
Quando o valor de this.currentPage mudar, o componente de paginação na página deve ser atualizado de acordo.

Aqui está a função initEvents completa:

initEvents() {
    this.root.querySelector("#btn-prev").addEventListener("click", () => {
      // TODO: Evento de clique para o botão "<", this.currentPage - 1 quando clicado.
      if (this.currentPage > 1) {
        this.currentPage--;
        this.initPagination();
      }
    });
    this.root.querySelector("#btn-next").addEventListener("click", () => {
      // TODO: Evento de clique para o botão ">", this.currentPage + 1 quando clicado.
      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();
    });
  }

Implementar a Função createPaginationIndexArr

Nesta etapa, você implementará a função createPaginationIndexArr no arquivo js/util.js, que gera um array de paginação (indexArr) com base nos argumentos da função, seguindo certas regras.

Abra o arquivo js/util.js.
Localize a função createPaginationIndexArr e complete a implementação.
A função deve gerar o array de paginação (indexArr) com base nos parâmetros passados currentPage, totalPages e pagerCount.
As regras para gerar o array de paginação são as seguintes:
- Caso especial: totalPages <= pagerCount
- Caso normal: totalPages > pagerCount
O indexArr gerado deve seguir os exemplos fornecidos na descrição do desafio.

Aqui está a função createPaginationIndexArr completa:

const createPaginationIndexArr = (currentPage, totalPages, pagerCount) => {
  let indexArr = [];
  // TODO: Gerar array de paginação com base nos parâmetros passados 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;
};

Implementar a Função renderPagination

Nesta etapa, você implementará a função renderPagination no arquivo js/index.js, que gera o template de string template para o componente de paginação com base no array indexArr.

Abra o arquivo js/index.js.
Localize a função renderPagination e complete a implementação.
A função deve gerar o template de string template para o componente de paginação com base no array indexArr, seguindo as regras descritas na descrição do desafio.
O template gerado deve ser inserido na estrutura HTML do componente de paginação usando this.root.innerHTML.

Aqui está a função renderPagination completa:

renderPagination(indexArr) {
  let template = "";
  // TODO: Gera um template de string template para o componente de paginação com base no array 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>`;
}

Testar o Componente de Paginação

Nesta etapa, você testará o resultado final do componente de paginação.

Salve os arquivos js/index.js e js/util.js.
Atualize a página web no navegador.
Verifique o efeito da página.

Parabéns! Você concluiu a implementação do Componente de Paginação. O efeito final da página deve ser o seguinte:

Descrição da Imagem

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.

Construindo um Componente de Paginação Reutilizável