Pagination simple en javascript

Les pages Web utilisent fréquemment une pagination, qui est le processus de division du contenu en plusieurs pages. Il permet aux utilisateurs de naviguer facilement sur de grandes quantités de contenu, ce qui le rend plus gérable et moins écrasant. Il améliore les temps de chargement globaux d'un site Web. La pagination permet également aux développeurs de gérer et de récupérer plus facilement les données des bases de données, en particulier lorsqu'ils traitent de grandes quantités de données.

Ce message décrira la procédure pour créer une pagination en javascript.

Comment créer une pagination simple en JavaScript?

L'idée de pagination JavaScript utilise le «Suivant" et "Précédent»Boutons ou liens pour naviguer entre les pages. L'objectif fondamental de la pagination est de permettre aux utilisateurs de naviguer rapidement dans le contenu en cliquant sur des liens ou des boutons.

Examinons l'exemple pour comprendre le processus de création de pagination simple dans JavaScript. Cela prendra trois étapes.

Étape 1: Ajoutez le contenu dans le fichier html
Tout d'abord, créez le contenu qui souhaite s'afficher sur la page Web. Ici, nous allons créer une liste commandée à l'aide d'un HTML "ol”Tag qui stocke les listes des langages de programmation, des fruits, du comptage et des jours de la semaine. Toutes ces listes seront imprimées sur différentes pages en utilisant la technique de pagination:

1. Html


2. CSS


3. Javascrip


4. Nœud js


5. Java


6. C++


7. C #


8. Python


9. SQL


10. Visual Basic


11. Pomme


12. Banane


13. Raisins


14. Orange


15. Cerise


16. Poire


17. mangue


18. Fraise


19. Pastèque


20. Grenade


21. Un


22. Deux


23. Trois


24. Quatre


25. Cinq


26. Six


27. Sept


28. Huit


29. Neuf


30. Dix


31. Lundi


32. Mardi


33. Mercredi


34. Jeudi


35. Vendredi


36. Samedi


37. Dimanche

Étape 2: Style le contenu et les boutons à l'aide de CSS
Ensuite, stylisez le contenu, les boutons et les actions effectuées par des boutons, tels que changer de couleur sur le volant et ainsi de suite.

La classe CSS pour styliser le «suivant»(>) Et«précédent"(<) buttons are as follows:

.Pagination
Largeur: calc (100% - 2rem);
Affichage: flex;
Align-Items: Centre;
Position: absolue;
en bas: 0;
rembourrage: 1rem 0;
Justification-contenu: centre;

Pour styliser les boutons dynamiques "1, 2, 3… », Utilisez le code CSS suivant:

.numéro de pagination,
.Page-Buttons
taille de police: 1.1rem;
Color d'arrière-plan: LightBlue;
Border: aucun;
marge: 0.25rem 0.25rem;
curseur: pointeur;
hauteur: 2.5rem;
Largeur: 2.5rem;
Border-Radius: .2rem;

Pour modifier la couleur sur le plan de planage des boutons, utilisez la classe donnée:

.Pagination-numéro: plané,
.Page-Buttons: pas (.handicapé): Hover
Contexte: LightBlue;

Pour les boutons actifs, définissez les différentes couleurs du bouton à l'aide des propriétés CSS ci-dessous:

.numéro de pagination.actif
Couleur: #FFF;
Contexte: # 0c313f;

Cette classe CSS est utilisée pour styliser la liste à afficher sur la page Web:

.Olstyle
Affichage: bloc en ligne;
Texte-aligne: gauche;

Lorsqu'il est nécessaire de masquer n'importe quel bouton ou tout contenu, utilisez la classe CSS ci-dessous:

.caché
Affichage: aucun;

Étape 3: Créez une pagination simple à l'aide de JavaScript
Maintenant, dans le fichier JavaScript, utilisez le code suivant pour créer un conteneur pour la pagination:

<

>

Dans l'extrait ci-dessus suivant:

• Tout d'abord, créez un conteneur pour les boutons de pagination en utilisant le «div"Element et affectez une classe CSS"pagination”Pour styliser les boutons.
• Créez deux boutons ("Suivant" et "Précédent») Comme boutons flèches en utilisant le«& LT" et "& gt".
• Créez une div pour les boutons dynamiques en fonction de la distribution de contenu.

Ici, nous déclarons quelques variables pour définir le contenu de pagination:

const PaginationLimit = 10;
const PageCount = mathématiques.Ceil (listitems.longueur / paginationlimit);
Soit CurrentPage = 1;

• Tout d'abord, divisez les données ou le contenu en pages. Vous pouvez le faire en limitant le nombre d'éléments par page. Ici, nous définissons la limite de la page sur «10», ce qui signifie que seulement 10 éléments seront affichés sur chaque page.
• Divisez le nombre total d'articles "listitems.longueur" par le "pagination»Et tourne vers le plus grand nombre en utilisant le«Mathématiques.ceil ()»Méthode pour obtenir le PageCount.
• Définissez la page actuelle comme «1".

Maintenant, créez une variable qui obtient les références des numéros de page, des boutons et de la liste de contenu à l'aide de leurs ID attribués:

const paginationNumbers = document.getElementById ("Page-numbers");
const nextbutton = document.GetElementById ("Next-Button");
const prevbutton = document.GetElementById ("Button prévalage");
const paginée = document.getElementById ("liste");
const listItems = paginée.queySelectorall ("li");

Définissez une fonction de désactivation du bouton lorsque la liste est au début ou à la fin. Cela signifie désactiver le «Suivant (>)"Bouton lorsque la dernière page est ouverte, de même, désactivant le"précédent (<)”Bouton Lorsque la première page est ouverte:

const disablebutton = (bouton) =>
bouton.liste de classe.Add ("Disabled");
bouton.setAttribute ("Disabled", true);
;

De même, désactiver le bouton, pour activer les boutons de pagination, utilisez la fonction ci-dessous:

const activybutton = (bouton) =>
bouton.liste de classe.retirer ("désactivé");
bouton.RemoveAtTribute ("Disabled");
;

Ici, nous gérerons l'état des boutons de la page, lorsqu'ils seront activés ou lorsqu'ils sont désactivés:

const handlePageButTonsstatus = () =>
if (currentPage === 1)
Disablebutton (Prevbutton);
autre
activerbutton (prevbutton);

if (pageCount === currentPage)
DisableButton (NextButton);
autre
activerbutton (NextButton);

;

Créez des boutons dynamiques en fonction de la longueur du contenu et ajoutez-les dans un conteneur de pagination:

const appendPageNumber = (index) =>
const pageNumber = document.createElement ("bouton");
numéro de page.className = "Pagination-Number";
numéro de page.innerHtml = index;
numéro de page.setAttribute ("page-index", index);
pagination.appenchild (pagenumber);
;
const getPaginationNumbers = () =>
pour (soit i = 1; i
document.queySelectorall (".Pagination-Number ").foreach ((bouton) =>
bouton.liste de classe.retirer ("actif");
const pageIndex = numéro (bouton.getAttribute ("page-index"));
if (pageIndex == currentPage)
bouton.liste de classe.ajouter ("actif");

);
;

Ajoutez le code ci-dessus à la fonction donnée afin que chaque fois qu'une nouvelle page soit définie, le numéro de page actif est mis à jour:

const setCurrentPage = (pagenum) =>
CurrentPage = Pagenum;
handleactivePageNumber ();
handlePageButTonsstatus ();
const prevrange = (pagenum - 1) * paginationlimit;
const Currrange = pagenum * paginationlimit;
listitems.foreach ((item, index) =>
article.liste de classe.ajouter ("caché");
if (index> = prevRange && index < currRange)
article.liste de classe.retirer ("caché");

);
;

Lorsque le bouton Numéro de page est cliqué, utilisez l'écouteur de l'événement Cliquez, pour appeler «setcurrentpage" fonction. Pour cliquer sur le bouton précédent, déplacez la page précédente en soustrayant le «1" du "page actuelle", Et pour cliquer sur le bouton Suivant, passez à la page suivante en ajoutant"1" dans le page actuelle»:

fenêtre.addEventListener ("Load", () =>
getPaginationNumbers ();
setCurrentPage (1);
prevbutton.addEventListener ("cliquez", () =>
setCurrentPage (CurrentPage - 1);
);
Nextbutton.addEventListener ("cliquez", () =>
setCurrentPage (CurrentPage + 1);
);
document.queySelectorall (".Pagination-Number ").foreach ((bouton) =>
const pageIndex = numéro (bouton.getAttribute ("page-index"));
if (pageIndex)
bouton.addEventListener ("cliquez", () =>
setCurrentPage (pageIndex);
);

);
);

Sortir

C'est tout sur la pagination en javascript.

Conclusion

Pour créer une pagination simple en JavaScript, créez d'abord un conteneur pour l'élément de pagination et la liste des éléments à paginer. Divisez la liste des éléments en petits groupes, ou «pages», Basé sur le nombre souhaité d'articles par page. Créez des boutons ou des liens pour naviguer entre les pages et les ajouter au conteneur de pagination. Ajoutez des écouteurs d'événements aux boutons pour mettre à jour les éléments affichés lorsque vous cliquez sur. Utilisez JavaScript pour masquer les éléments qui ne sont pas sur la page actuellement affichée et pour afficher les éléments qui sont. Style l'élément de pagination et les boutons comme vous le souhaitez. Ce message a décrit la procédure de création de pagination en javascript.