Paginazione semplice in Javascript

Le pagine Web usano frequentemente la paginazione, che è il processo di rottura dei contenuti in più pagine. Consente agli utenti di navigare facilmente attraverso grandi quantità di contenuti, rendendolo più gestibile e meno schiacciante. Migliora i tempi di caricamento complessivi di un sito Web. La paginazione semplifica anche per gli sviluppatori gestire e recuperare i dati dai database, specialmente quando si tratta di grandi quantità di dati.

Questo post descriverà la procedura per creare impaginazione in JavaScript.

Come creare una semplice impaginazione in JavaScript?

L'idea di impaginazione JavaScript usa "Prossimo" E "Precedente"Pulsanti o collegamenti per navigare tra le pagine. L'obiettivo fondamentale della paginazione è consentire agli utenti di navigare rapidamente attraverso il contenuto facendo clic su collegamenti o pulsanti.

Diamo un'occhiata all'esempio per capire il processo di creazione di una semplice paginazione in JavaScript. Ci vorranno tre passi.

Passaggio 1: aggiungere il contenuto nel file HTML
Innanzitutto, crea il contenuto che desidera visualizzare sulla pagina web. Qui creeremo un elenco ordinato usando un HTML "ol"Tag che memorizza gli elenchi dei linguaggi di programmazione, dei frutti, del conteggio e dei giorni della settimana. Tutti questi elenchi saranno stampati su diverse pagine usando la tecnica di impagamento:

1. Html


2. CSS


3. JavaScript


4. Nodo js


5. Giava


6. C++


7. C#


8. Pitone


9. SQL


10. Visual Basic


11. Mela


12. Banana


13. Uva


14. Arancia


15. Ciliegia


16. Pera


17. Mango


18. Fragola


19. Anguria


20. Melograno


21. Uno


22. Due


23. Tre


24. quattro


25. Cinque


26. Sei


27. Sette


28. Otto


29. Nove


30. Dieci


31. Lunedi


32. Martedì


33. Mercoledì


34. Giovedì


35. Venerdì


36. Sabato


37. Domenica

Passaggio 2: modellare il contenuto e i pulsanti usando CSS
Quindi, modella il contenuto, i pulsanti e le azioni eseguite da pulsanti, come cambiare colore sul mouse e così via.

La classe CSS per lo styling del "Prossimo"(>) E"precedente"(<) buttons are as follows:

.impaginazione
larghezza: calc (100% - 2Rem);
display: flex;
ALIGE-ITMS: CENTRO;
Posizione: assoluto;
In basso: 0;
imbottitura: 1rem 0;
giustificare contento: centro;

Per lo styling dei pulsanti dinamici "1, 2, 3 .. ", Usa il seguente codice CSS:

.Numero di impaginazione,
.Page-Buttons
Font-Size: 1.1rem;
Background-color: LightBlue;
confine: nessuno;
Margine: 0.25rem 0.25rem;
Cursore: puntatore;
Altezza: 2.5rem;
larghezza: 2.5rem;
raggio di confine: .2rem;

Per cambiare il colore sull'obbligo dei pulsanti, utilizzare la classe data:

.Numero di impaginazione: hover,
.Page-Buttons: NOT (.disabilitato): hover
Sfondo: lightblue;

Per i pulsanti attivi, impostare i diversi colori del pulsante utilizzando le proprietà CSS sotto:

.Numero di impaginazione.attivo
Colore: #FFF;
Background: #0C313F;

Questa classe CSS viene utilizzata per lo styling dell'elenco da visualizzare nella pagina Web:

.olstyle
display: blocco inline;
Testo-align: sinistra;

Quando è necessario nascondere qualsiasi pulsante o qualsiasi contenuto utilizzare la classe CSS seguente:

.nascosto
visualizzazione: nessuno;

Passaggio 3: creare una semplice impaginazione usando JavaScript
Ora, nel file JavaScript, usa il seguente codice per creare un contenitore per la paginazione:

<

>

Di seguito sopra il frammento:

• Innanzitutto, crea un contenitore per i pulsanti di impaginazione usando "div"Elemento e assegnare una classe CSS"impaginazione"Per lo styling dei pulsanti.
• Crea due pulsanti ("Prossimo" E "Precedente”) Come pulsanti freccia usando il"& lt" E "& gt".
• Crea un div per i pulsanti dinamici in base alla distribuzione del contenuto.

Qui, dichiariamo alcune variabili per impostare il contenuto di impaginazione:

const paginationlimit = 10;
const PageCount = matematica.CEIL (ListItems.lunghezza / paginationlimit);
Lascia che currentPage = 1;

• Innanzitutto, dividi i dati o il contenuto in pagine. Puoi farlo limitando il numero di elementi per pagina. Qui, impostiamo il limite della pagina su "10", il che significa che solo 10 elementi verranno visualizzati su ogni pagina.
• Dividi il numero totale di articoli "Elementi della lista.lunghezza" dal "Paginationlimit"E rotondo al numero intero più alto utilizzando il"Matematica.ceil ()"Metodo per ottenere il pagamento.
• Imposta la pagina corrente come "1".

Ora, crea una variabile che ottiene i riferimenti dei numeri di pagina, dei pulsanti ed elenco di contenuti utilizzando i loro ID assegnati:

const paginationnumbers = documento.getElementById ("Page-Numbers");
const nextButton = Documento.getElementByID ("Next-Button");
const prevButton = documento.getElementById ("prev-botton");
const paginated list = documento.getElementById ("elenco");
const listItems = paginatedlist.QuerySelectorAll ("Li");

Definire una funzione per disabilitare il pulsante quando l'elenco è all'inizio o alla fine. Questo significa disabilitare il "Next (>)"Pulsante quando l'ultima pagina viene aperta, allo stesso modo, disabilitando il"precedente (<)"Pulsante quando viene aperta la prima pagina:

cons DisableButton = (Button) =>
pulsante.classlist.Aggiungi ("disabilitato");
pulsante.setAttribute ("disabilitato", true);
;

Allo stesso modo, disabilitando il pulsante, per abilitare i pulsanti di impaginazione, utilizzare la funzione seguente:

const abilitaButton = (Button) =>
pulsante.classlist.rimuovere ("disabilitato");
pulsante.removeattribute ("disabilitato");
;

Qui gestiremo lo stato dei pulsanti di pagina, quando saranno abilitati o quando disabilitati:

const handlepageBottonSstatus = () =>
if (currentPage === 1)
DisableButton (PrevButton);
altro
AbilitaButton (PrevButton);

if (pageCount === CurrentPage)
DisableButton (NextButton);
altro
AbilitaButton (NextButton);

;

Crea pulsanti dinamici in base alla lunghezza del contenuto e aggiungili in un contenitore di impaginazione:

const AppendPagEnumber = (indice) =>
const pagenumber = documento.createElement ("pulsante");
numero di pagina.className = "Pagination-number";
numero di pagina.InnerHtml = indice;
numero di pagina.setAttribute ("Page-indice", indice);
Paginationnumbers.AppendChild (Pagenumber);
;
const getPaginationNumbers = () =>
per (let i = 1; i
documento.QuerySelectorall (".Numero di impaginazione ").foreach ((button) =>
pulsante.classlist.rimuovere ("attivo");
const pageindex = numero (pulsante.getAttribute ("Page-indice"));
if (pageindex == currentPage)
pulsante.classlist.Aggiungi ("attivo");

);
;

Aggiungi il codice sopra alla funzione indicata in modo che ogni volta che viene impostata una nuova pagina, il numero di pagina attivo viene aggiornato:

const setCurrentPage = (pagenum) =>
CurrentPage = pagenum;
HandleActivePagenumber ();
manubrioBottonSstatus ();
const prevrange = (pagenum - 1) * paginationlimit;
const CurrRange = pagenum * paginationlimit;
Elementi della lista.foreach ((item, indice) =>
articolo.classlist.Aggiungi ("nascosto");
if (indice> = prevrange && indice < currRange)
articolo.classlist.rimuovere ("nascosto");

);
;

Quando viene fatto clic sul pulsante Numero di pagina, utilizzare il listener dell'evento, per chiamare "SetCurrentPage" funzione. Per fare clic sul pulsante precedente, sposta la pagina precedente sottraendo "1" dal "pagina corrente", E per fare clic sul pulsante successivo, spostati alla pagina successiva aggiungendo"1" nel pagina corrente":

finestra.addEventListener ("Load", () =>
getPaginationNumbers ();
setCurrentPage (1);
PrevButton.addEventListener ("Click", () =>
setCurrentPage (CurrentPage - 1);
);
NextButton.addEventListener ("Click", () =>
setCurrentPage (CurrentPage + 1);
);
documento.QuerySelectorall (".Numero di impaginazione ").foreach ((button) =>
const pageindex = numero (pulsante.getAttribute ("Page-indice"));
if (pageindex)
pulsante.addEventListener ("Click", () =>
setCurrentPage (PageIndex);
);

);
);

Produzione

Riguarda la paginazione in JavaScript.

Conclusione

Per creare una semplice paginazione in JavaScript, in primo luogo, creare un contenitore per l'elemento di impaginazione e l'elenco degli elementi da paginare. Dividi l'elenco degli elementi in gruppi più piccoli o "pagine", Basato sul numero desiderato di elementi per pagina. Crea pulsanti o collegamenti per navigare tra le pagine e aggiungerli al contenitore di impaginazione. Aggiungi gli ascoltatori di eventi ai pulsanti per aggiornare gli elementi visualizzati quando si fa clic su. Usa JavaScript per nascondere gli elementi che non si trovano nella pagina attualmente visualizzata e per mostrare gli elementi che sono. Modella l'elemento di impaginazione e i pulsanti come desiderato. Questo post ha descritto la procedura per la creazione di impaginazione in JavaScript.