Paginação simples em JavaScript

Páginas da web freqüentemente usam a paginação, que é o processo de dividir conteúdo em várias páginas. Ele permite que os usuários naveguem facilmente por grandes quantidades de conteúdo, tornando -o mais gerenciável e menos esmagador. Melhora os tempos de carregamento geral de um site. A paginação também facilita para os desenvolvedores gerenciar e recuperar dados de bancos de dados, especialmente ao lidar com grandes quantidades de dados.

Este post descreverá o procedimento para criar paginação em JavaScript.

Como criar uma paginação simples em JavaScript?

A ideia de paginação JavaScript usa o “Próximo" e "Anterior”Botões ou links para navegar entre as páginas. O objetivo fundamental da paginação é permitir que os usuários naveguem rapidamente pelo conteúdo clicando em links ou botões.

Vejamos o exemplo para entender o processo de criação de paginação simples em JavaScript. Vai dar três passos.

Etapa 1: Adicione o conteúdo no arquivo HTML
Primeiro, crie o conteúdo que deseja exibir na página da web. Aqui, criaremos uma lista ordenada usando um html “ol”Tag que armazena as listas das linguagens de programação, frutas, contagem e os dias da semana. Todas essas listas serão impressas em diferentes páginas usando a técnica de paginação:

1. Html


2. CSS


3. JavaScript


4. Nó js


5. Java


6. C++


7. C#


8. Pitão


9. SQL


10. Visual básico


11. Maçã


12. Banana


13. Uvas


14. Laranja


15. Cereja


16. Pera


17. manga


18. Morango


19. Melancia


20. Romã


21. Um


22. Dois


23. Três


24. Quatro


25. Cinco


26. Seis


27. Sete


28. Oito


29. Nove


30. Dez


31. Segunda-feira


32. Terça-feira


33. Quarta-feira


34. Quinta-feira


35. Sexta-feira


36. Sábado


37. Domingo

Etapa 2: estilize o conteúdo e os botões usando CSS
Em seguida, estilize o conteúdo, os botões e as ações executadas por botões, como mudar de cor no pavo e assim por diante.

A classe CSS para estilizar o “próximo”(>) E“anterior”(<) buttons are as follows:

.paginação
Largura: Calc (100% - 2REM);
exibição: flex;
alinhado-itens: centro;
Posição: Absoluto;
Inferior: 0;
preenchimento: 1Rem 0;
Justify-Content: Center;

Para estilizar os botões dinâmicos “1, 2, 3… ”, Use o seguinte código CSS:

.número de paginação,
.Página-buttons
Size da fonte: 1.1Rem;
Background-Color: LightBlue;
fronteira: nenhuma;
Margem: 0.25REM 0.25REM;
Cursor: Ponteiro;
Altura: 2.5REM;
Largura: 2.5REM;
Radio de fronteira: .2REM;

Para alterar a cor no pau dos botões, use a classe especificada:

.Número de paginação: Passe o mouse,
.Página-buttons: não (.desabilitado): pairar
Antecedentes: LightBlue;

Para os botões ativos, defina as diferentes cores do botão usando as propriedades CSS abaixo:

.número de paginação.ativo
Cor: #FFF;
Antecedentes: #0C313F;

Esta classe CSS é usada para estilizar a lista a ser exibida na página da web:

.Olstyle
Exibição: bloco embutido;
Alinhamento de texto: esquerda;

Quando há necessidade de ocultar qualquer botão ou qualquer conteúdo, use a classe CSS abaixo:

.escondido
Mostrar nenhum;

Etapa 3: Crie paginação simples usando JavaScript
Agora, no arquivo javascript, use o código a seguir para criar um contêiner para paginação:

<

>

No seguinte snippet acima:

• Primeiro, crie um contêiner para os botões de paginação usando o “div”Elemento e atribua uma classe CSS“paginação”Para estilizar os botões.
• Crie dois botões (“Próximo" e "Anterior”) Como botões de seta usando o“& lt" e "& gt”.
• Crie uma div para os botões dinâmicos com base na distribuição de conteúdo.

Aqui, declaramos algumas variáveis ​​para definir o conteúdo de paginação:

const paginaçãoLimit = 10;
const pageCount = matemática.CEIL (LISTITEMS.comprimento / paginação em que);
deixe currentpage = 1;

• Primeiro, divida os dados ou conteúdo em páginas. Você pode fazer isso limitando o número de itens por página. Aqui, definimos o limite da página para "10", o que significa que apenas 10 itens serão exibidos em todas as páginas.
• Divida o número total de itens “lista de itens.comprimento" pelo "Paginação -limite”E redondo para o número inteiro mais alto, utilizando o“Matemática.teto ()”Método para obter o Pagecount.
• Defina a página atual como “1”.

Agora, crie alguma variável que obtenha as referências dos números de página, botões e lista de conteúdo usando seus IDs atribuídos:

const paginaçãoNumbers = documento.getElementById ("Page-Numbers");
const nextButton = documento.getElementById ("Next-Button");
const prevButton = documento.getElementById ("Prev-Button");
const paginlist = documento.getElementById ("Lista");
const listItems = paginatedlist.QuerySelectorAll ("Li");

Defina uma função para desativar o botão quando a lista estiver no início ou no final. Isso significa desativar o “Próximo (>)”Botão quando a última página é aberta, da mesma forma, desativando o“anterior (<)”Botão quando a primeira página é aberta:

const desabilleButton = (botão) =>
botão.Lista de classe.add ("desativado");
botão.setattribute ("desativado", true);
;

Da mesma forma, desativando o botão, para ativar os botões de paginação, use a função abaixo:

const enableButton = (botão) =>
botão.Lista de classe.remover ("desativado");
botão.removeattribute ("desativado");
;

Aqui, lidaremos com o status dos botões da página, quando eles serão ativados ou quando desativados:

const handlePageButtonsStatus = () =>
if (currentpage === 1)
desabilitarbutão (PrevButton);
outro
EnableButton (PrevButton);

if (pageCount === CurrentPage)
desabilleButton (NextButton);
outro
EnableButton (NextButton);

;

Crie botões dinâmicos de acordo com a duração do conteúdo e adicione -os em um recipiente de paginação:

const appendpageNumber = (index) =>
const pagenumber = documento.createElement ("botão");
número de página.ClassName = "Number de paginação";
número de página.inerhtml = index;
número de página.setAtattribute ("página-index", índice);
Paginação Numbers.ApndendChild (PagenBumber);
;
const getPaginationNumbers = () =>
para (vamos i = 1; i
documento.QuerySelectorAll (".número de paginação ").foreach ((botão) =>
botão.Lista de classe.remover ("ativo");
const PageIndex = número (botão.getAttribute ("página-index"));
if (PageIndex == CurrentPage)
botão.Lista de classe.add ("ativo");

);
;

Adicione o código acima à função fornecida para que cada vez que uma nova página seja definida, o número da página ativo é atualizado:

const setCurrentPage = (pagenum) =>
currentpage = pagenum;
handleActivePageNumber ();
handlePageButtonsStatus ();
const prevRange = (pagenum - 1) * paginaçãoLimit;
const currrange = pagenum * paginação;
lista de itens.foreach ((item, índice) =>
item.Lista de classe.add ("oculto");
if (index> = prevRange && Índice < currRange)
item.Lista de classe.remover ("oculto");

);
;

Quando o botão Número da página for clicado, use o ouvinte de clique no evento, para ligar para o “setCurrentPage”Função. Para clicar no botão anterior, mova a página anterior subtraindo o “1" de "pagina atual”E para clicar no botão Avançar, vá para a próxima página adicionando“1" no pagina atual”:

janela.addEventListener ("load", () =>
getPaginationNumbers ();
setCurrentPage (1);
PrevButton.addEventListener ("clique", () =>
setCurrentPage (CurrentPage - 1);
);
Próximo botão.addEventListener ("clique", () =>
setCurrentPage (CurrentPage + 1);
);
documento.QuerySelectorAll (".número de paginação ").foreach ((botão) =>
const PageIndex = número (botão.getAttribute ("página-index"));
if (PageIndex)
botão.addEventListener ("clique", () =>
setCurrentPage (PageIndex);
);

);
);

Saída

Isso é tudo sobre a paginação em JavaScript.

Conclusão

Para criar paginação simples em JavaScript, primeiro, crie um contêiner para o elemento de paginação e a lista de itens a serem paginados. Divida a lista de itens em grupos menores, ou “Páginas”, Com base no número desejado de itens por página. Crie botões ou links para navegar entre as páginas e adicione -os ao recipiente de paginação. Adicione os ouvintes do evento aos botões para atualizar os itens exibidos quando clicados. Use JavaScript para ocultar os itens que não estão na página atualmente exibida e para mostrar os itens que são. Estilize o elemento de paginação e os botões conforme desejado. Este post descreveu o procedimento para criar paginação em JavaScript.