Comment utiliser la pagination sur les tables HTML à l'aide de JavaScript

Une pagination est ajoutée aux tableaux pour améliorer l'expérience utilisateur en divisant une grande quantité de données en morceaux plus petits et plus gérables. Il permet aux utilisateurs de naviguer facilement dans les données en affichant une page à la fois plutôt que d'avoir à faire défiler une quantité écrasante d'informations. De plus, la pagination peut aider à améliorer les performances en réduisant la quantité de données qui doivent être chargées immédiatement.

Ce message définira le processus pour utiliser la pagination sur les tables HTML à l'aide de JavaScript.

Comment utiliser la pagination sur les tables HTML à l'aide de JavaScript?

En pagination, le contenu est divisé en petits morceaux à afficher sur les différentes pages en cliquant sur les boutons qui naviguent dans les pages.

Exemple

Voyons l'exemple donné pour comprendre le processus de création de pagination sur les tables HTML en JavaScript. Cela prendra deux étapes:

• Créer une table dans un fichier html
• Définir la pagination dans le fichier javascript

Étape 1: Ajoutez le tableau dans le fichier html

Tout d'abord, créez une table dans un fichier HTML, en utilisant le «

" étiqueter:

Nom	Âge	Date d'inscription	Désignation
Marie	28	16MAY2022	HEURE
Steven	29	18-mai2020	Assistant
John	32	15march2017	Comptable
Covin	25	14PRIL2019	Mto
Caïn	27	5SEP2019	Assistant
Marco	23	21Jan2018	Comptes
Rhonda	24	3jan2020	HEURE
Pavé	30	25march2018	HEURE
Dan	21	9 juillet2021	Assistant
Susan	28	28NOV2022	Mto
Covel	29	6 juillet2021	Comptes

Étape 2: définir la pagination de la table en javascript

Maintenant, dans le fichier javascript, appliquez le processus de pagination sur la table. Pour ce faire, d'abord, nous obtiendrons l'élément de table en utilisant le «getElementByid ()" méthode:

Var Table = Document.getElementById ("empinfo");

Définissez le nombre de lignes de table pour afficher par page:

var RowsPerpage = 5;

Obtenez le nombre total de lignes de la table en utilisant le «longueur«Propriété et stockez-le dans une variable»compte de ligne»:

var rowcount = table.Lignes.longueur;

Obtenez le nom de la balise de la première cellule de la table dans la première ligne et vérifiez si la table a une ligne de tête qui renverra une valeur booléenne:

Var Tablehead = Table.lignes [0].FirstElementChild.TagName === "th";

Créez un tableau pour maintenir chaque ligne de la table à afficher sur les pages:

var tr = [];

Créons un compteur de boucle pour démarrer le compte à partir de la 2ème rangée du tableau:

var i, ii, j = (table de table) ? dix;

Créer une variable "e"Cela contient la première rangée de la table qui est la tête de table Utilisation de l'opérateur ternaire:

var th = (Tableau de table ? tableau.lignes [(0)].OUTERHTML: "");

Maintenant, appelez les mathématiques.Méthode ceil () pour compter le nombre de pages en divisant les lignes totales d'une table par nombre de lignes à afficher par page:

var pageCount = mathématiques.plafond (table.Lignes.Longueur / RowsPerpage);

Vérifiez le nombre de pages et définissez le contenu sur les pages:

if (pageCount> 1)
pour (i = j, ii = 0; i < rowCount; i++, ii++)
tr [ii] = tableau.lignes [i].OUTERHTML;

tableau.insertAdjacenthtml ("Afterend", "
tri (1);

Dans le code suivant ci-dessus:

• Itérer le tableau en utilisant «pour”Loop et attribuez chaque ligne, y compris son nom de balise avec son contenu au tableau.
• Créer une nouvelle div qui contient les boutons.
• Appeler le "trier()»Fonction en passant 1, ce qui indique que la page par défaut sera la première page.

Définissez le contenu de la page en créant des pages en cliquant sur le bouton de l'utilisateur. Faire cela:

• Tout d'abord, nous définirons une fonction appelée «trier()"Cela prendra une page comme paramètre lorsque l'utilisateur clique sur le bouton spécifié.
• Ensuite, les lignes seront affichées sur la page en affichant la première ligne en tant que permanent, c'est-à-dire la (s) tête (s) de table (s).
• Enfin, créez les boutons de pagination en appelant le «PageButtons ()" fonction:

functionSort (page)
var rows = th, s = ((page enverpage *) - wowsperpage);
pour (i = s; i < (s + rowsPerPage) && i < tr.length; i++)
lignes + = tr [i];
tableau.innerHtml = lignes;
document.getElementByid ("boutons").innerHtml = pageButtons (PageCount, page);

Maintenant, créez des boutons "précédent" et "suivant»Boutons avec boutons de pagination basés sur le nombre de pages:

Fonction PageButtons (PageCount, courant)
var prevbutton = (courant == 1)? "désactivé" : "";
var nextbutton = (actuel == PageCount)? "désactivé" : "";
var boutons = "pour (i = 1; i <= pageCount; i++)
boutons + = "";

boutons + = "'onclick =' tri (" + (actuel + 1) + ") '" + nextButton + ">";
boutons de retour;

Ici, vous pouvez voir chaque page affiche un contenu unique en cliquant sur les boutons:

C'est tout sur la pagination sur les tables HTML en JavaScript.

Conclusion

Pour utiliser la pagination sur les tables HTML, créez d'abord une table dans un fichier HTML, puis créez une pagination dans un fichier javascript en créant un tableau qui stocke les lignes, définissez le nombre de lignes à afficher par page, créez un compteur de boucle pour commencer Comptez à partir de la 2ème rangée du tableau pour afficher les lignes sur les pages. Définissez la tête de table en tant que ligne permanente sur chaque page et chargez d'autres lignes sur les pages en fonction du nombre. Ce message a défini le processus pour utiliser la pagination sur les tables HTML à l'aide de JavaScript.