Como implementar paginação com Vanilla JavaScript

A paginação é usada para dividir um bloco de conteúdo em páginas navegáveis ​​em uma página da web.

Além de facilitar a visualização das informações, também ajuda no carregamento de dados de um servidor. Usando a paginação, você pode decidir carregar apenas um número fixo de itens cada vez que o usuário decidir vê-los. Isso ajuda a economizar tempo e evitar a sobrecarga de informações em uma página.

Aqui está uma prévia do produto final:

Nosso elemento de paginação usará números de página e próxima página & página anterior botões de navegação.

Vamos começar!

1. Coloque o conteúdo com HTML

Nesta demonstração, colocaremos o conteúdo a ser paginado usando HTML. Em um exemplo da vida real, podemos estar obtendo nosso conteúdo como JSON de um servidor, então também veremos como a lógica de paginação pode ser aplicada a isso quando estivermos escrevendo nosso código JavaScript.

Primeiro, definimos nosso conteúdo paginado como uma lista:

  
Item 1
  
Item 2
  
Item 3
  ...

A seguir definimos um nav elemento que contém próximo e anterior botões e o contêiner de números de paginação:

Os números de paginação div está vazio por enquanto, pois os números de página serão determinados usando JavaScript.

2. Estilizando com CSS

Estamos adotando uma abordagem bastante minimalista para esta demonstração, portanto, apenas estilizaremos os números de paginação e o contêiner.

Coloque o contêiner de paginação na parte inferior da página, substitua o estilo de botão padrão para o número de paginação e defina um active class para mostrar qual número de página está selecionado no momento:

.pagination-container {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  justify-content: center;
}

.pagination-number,
.pagination-button{
  font-size: 1.1rem;
  background-color: transparent;
  border: none;
  margin: 0.25rem 0.25rem;
  cursor: pointer;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: .2rem;
}

.pagination-number:hover,
.pagination-button:not(.disabled):hover {
  background: #fff;
}

.pagination-number.active {
  color: #fff;
  background: #0085b6;
}

Também adicionamos alguns simples :hover estilo, mas use o :not() seletor para certifique-se de que não se aplica aos botões desativados.

3. Lógica de paginação com JavaScript

Agora para fazer funcionar. Vamos definir o que estamos tentando alcançar com a paginação:

1. Exiba apenas um número específico de itens em cada página
2. Exibir números de página com base em quantas vezes o total de itens é dividido
3. Quando um número de página é clicado, altere a exibição para essa página
4. Permitir navegar para as páginas anteriores e seguintes

Primeiro, pegue todos os elementos que vamos precisar:

const paginationNumbers = document.getElementById("pagination-numbers");
const paginatedList = document.getElementById("paginated-list");
const listItems = paginatedList.querySelectorAll("li");
const nextButton = document.getElementById("next-button");
const prevButton = document.getElementById("prev-button");

Em seguida, definiremos nossas variáveis ​​globais:

• paginationLimit: quantos itens queremos exibir em cada página; e
• pageCount: quantas páginas haverá com base no paginationLimit.
• currentPage: armazena o valor da página atual

Calcule o pageCount dividindo o número total de itens (listItems.length) pelo paginationLimit e arredondando para o número inteiro mais alto usando o Math.ceil função.

“O Math.ceil() função sempre arredonda um número para o próximo maior inteiro.” – MDN

Portanto, se tivermos 50 itens e quisermos exibir apenas 10 itens por página, nossa contagem de páginas será 50/10 = 5 páginas. Da mesma forma, se tivermos 55 itens e quisermos exibir 10 itens por página, nossa contagem de páginas será 55/10 = 5,5, o que arredonda até 6 páginas.

const paginationLimit = 10;
const pageCount = Math.ceil(listItems.length / paginationLimit);
let currentPage;

Adicionar números de página

Agora que sabemos de quantas páginas precisaremos, podemos definir uma função para criar um novo botão para o número da página e adicionar os botões ao paginationNumbers recipiente.

const appendPageNumber = (index) => {
  const pageNumber = document.createElement("button");
  pageNumber.className = "pagination-number";
  pageNumber.innerHTML = index;
  pageNumber.setAttribute("page-index", index);
  pageNumber.setAttribute("aria-label", "Page " + index);

  paginationNumbers.appendChild(pageNumber);
};

const getPaginationNumbers = () => {
  for (let i = 1; i <= pageCount; i++) {
    appendPageNumber(i);
  }
};

E então vamos chamar o getPaginationNumbers função quando a página da web é carregada usando o window.load() evento:

window.addEventListener("load", () => {
  getPaginationNumbers();
});

Exibir página ativa

Queremos definir uma função para exibir apenas quantos itens são permitidos no paginationLimit em cada página. Veja como vamos implementá-lo:

Defina o valor do currentPage variável para o pageNum valor:

const setCurrentPage = (pageNum) => {
  currentPage = pageNum;
};

Obtenha o intervalo de itens a serem exibidos. Se estivermos na página 1, queremos mostrar os itens de 1 a 10 (de acordo com o paginationLimit). se estivermos na página 2, queremos mostrar os itens 11 a 20 e assim por diante.

const setCurrentPage = (pageNum) => {
  currentPage = pageNum;
  
  const prevRange = (pageNum - 1) * paginationLimit;
  const currRange = pageNum * paginationLimit;
};

Percorra a lista de itens a serem exibidos e oculte todos os itens. Em seguida, reexiba todos os itens que estão dentro do intervalo.

Observação: como estamos trabalhando com arrays, o item 1 estará em 0 e o item 10 estará na posição 9, então nossa lógica fica assim:

const setCurrentPage = (pageNum) => {
  currentPage = pageNum;
  
  const prevRange = (pageNum - 1) * paginationLimit;
  const currRange = pageNum * paginationLimit;

  listItems.forEach((item, index) => {
    item.classList.add("hidden");
    if (index >= prevRange && index < currRange) {
      item.classList.remove("hidden");
    }
  });
};

Usamos esse método, pois nossa implementação está apenas ocultando o conteúdo HTML. Se estivéssemos tentando anexar conteúdo de um objeto JSON ao DOM, poderíamos atualizar a lógica para algo como:

  jsonData.forEach((item, index) => {
    elementContainer.innerHTML = ''
    if (index >= prevRange && index < currRange) {
      elementContainer.appendChild(item)
    }
  });

Atualize o window.load() evento para definir a página atual como página 1 assim que a página da Web for carregada:

window.addEventListener("load", () => {
  getPaginationNumbers();
  setCurrentPage(1);
});

Adicionar ouvinte de eventos de botões de número de página

Use um ouvinte de evento de clique para acionar o setCurrentPage sempre que um botão de número de página é clicado. Coloque esta função dentro do window.load() event então agora a função se parece com isso:

window.addEventListener("load", () => {
  getPaginationNumbers();
  setCurrentPage(1);

  document.querySelectorAll(".pagination-number").forEach((button) => {
    const pageIndex = Number(button.getAttribute("page-index"));

    if (pageIndex) {
      button.addEventListener("click", () => {
        setCurrentPage(pageIndex);
      });
    }
  });
});

Definir número de página ativa

Também queremos definir uma função para adicionar a classe ativa ao número da página que acabamos de clicar. Redefinimos todos os botões da página removendo a classe ativa. Então, se o índice de página do botão corresponder ao currentPage variável global, adicionamos a classe ativa a esse botão.

const handleActivePageNumber = () => {
  document.querySelectorAll(".pagination-number").forEach((button) => {
    button.classList.remove("active");
    
    const pageIndex = Number(button.getAttribute("page-index"));
    if (pageIndex == currentPage) {
      button.classList.add("active");
    }
  });
};

Inclua esta função no setCurrentPage função para que o número da página ativa seja atualizado toda vez que uma nova página for definida:

const setCurrentPage = (pageNum) => {
  currentPage = pageNum;
  
  handleActivePageNumber();

  const prevRange = (pageNum - 1) * paginationLimit;
  const currRange = pageNum * paginationLimit;

  listItems.forEach((item, index) => {
    item.classList.add("hidden");
    if (index >= prevRange && index < currRange) {
      item.classList.remove("hidden");
    }
  });
};

Neste ponto, devemos ter um sistema de navegação de página funcional que se parece com isso:

Botões Próximo e Anterior

Vamos estender essa funcionalidade para incluir o próximo e anterior botões. Podemos usar a mesma implementação no setCurrentPage() função e atualize a lógica:

• para o anterior botão, mudamos a página usando setCurrentPage(currentPage - 1)
• para o próximo botão, mudamos a página usando setCurrentPage(currentPage + 1)

Incluir os ouvintes de eventos para próximo e anterior botões em window.load():

window.addEventListener("load", () => {
  getPaginationNumbers();
  setCurrentPage(1);

  prevButton.addEventListener("click", () => {
    setCurrentPage(currentPage - 1);
  });

  nextButton.addEventListener("click", () => {
    setCurrentPage(currentPage + 1);
  });

  document.querySelectorAll(".pagination-number").forEach((button) => {
    const pageIndex = Number(button.getAttribute("page-index"));

    if (pageIndex) {
      button.addEventListener("click", () => {
        setCurrentPage(pageIndex);
      });
    }
  });
});

Desativar botões de navegação da página

Também queremos incluir um recurso de desativação no próximo e anterior botões.

• desativar o anterior botão se estivermos na primeira página (se a página atual for 1)
• desativar o próximo botão se estivermos na última página (se a página atual for o número total de páginas)

const disableButton = (button) => {
  button.classList.add("disabled");
  button.setAttribute("disabled", true);
};

const enableButton = (button) => {
  button.classList.remove("disabled");
  button.removeAttribute("disabled");
};

const handlePageButtonsStatus = () => {
  if (currentPage === 1) {
    disableButton(prevButton);
  } else {
    enableButton(prevButton);
  }

  if (pageCount === currentPage) {
    disableButton(nextButton);
  } else {
    enableButton(nextButton);
  }
};

Por fim, passe o handlePageButtonsStatus() função no setCurrentPage() função para que verificamos a navegação toda vez que uma nova página é clicada:

const setCurrentPage = (pageNum) => {
  currentPage = pageNum;

  handleActivePageNumber();
  handlePageButtonsStatus();
  
  const prevRange = (pageNum - 1) * paginationLimit;
  const currRange = pageNum * paginationLimit;

  listItems.forEach((item, index) => {
    item.classList.add("hidden");
    if (index >= prevRange && index < currRange) {
      item.classList.remove("hidden");
    }
  });
};

Conclusão

E isso é tudo pessoal! Agora temos uma implementação totalmente funcional e acessível de uma seção paginada.

Aumente o nível de suas habilidades de JavaScript de front-end!

Temos muitos tutoriais básicos e práticos de JavaScript no Tuts+, para que você possa aprender enquanto cria: