Maison > interface Web > js tutoriel > Utilisation de JavaScript pour implémenter l'affichage paginé des données du tableau

Utilisation de JavaScript pour implémenter l'affichage paginé des données du tableau

王林
Libérer: 2023-06-16 10:00:11
original
2419 Les gens l'ont consulté

À mesure que les données continuent de croître, l'affichage des tableaux devient plus difficile. La plupart du temps, la quantité de données dans un tableau est si importante que son chargement devient lent et les utilisateurs doivent constamment parcourir la page pour trouver les données souhaitées. Cet article explique comment utiliser JavaScript pour réaliser un affichage paginé des données de table, permettant ainsi aux utilisateurs de trouver plus facilement les données souhaitées.

1. Créer dynamiquement des tableaux

Afin de rendre la fonction de pagination plus contrôlable, il est nécessaire de créer dynamiquement des tableaux. Dans la page HTML, ajoutez un élément de tableau similaire à celui ci-dessous.

Numéro Nom Âge Genre
1 小红 20 Femme
2 Xiao Ming 22 Homme
3 小花 25 Femme

En JavaScript, définissez d'abord un tableau contenant toutes les données du tableau :

let tableData = [
{ id : 1, nom : '小红', âge : 20, sexe : 'femelle' },
{ id : 2 , nom : 'Xiao Ming', âge : 22, sexe : 'Homme' },
{ identifiant : 3, nom : '小花', âge : 25, sexe : 'Femme' },
// Plus de données
] ; Ensuite, créez une fonction appelée "createTable", cette fonction créera un élément de tableau vide et l'insérera dans la page HTML.

// Créer une table

function createTable() {

let table = document.createElement('table'); // Créer un élément de table
table.id = 'table-page'; // Définir l'identifiant
table.classList. add('table'); // Ajouter un style
let thead = document.createElement('thead');
let tr = document.createElement('tr');
let thNum = document.createElement('th');
thNum.innerHTML = 'Number';
tr.appendChild(thNum);
let thName = document.createElement('th');
thName.innerHTML = 'Name';
tr.appendChild(thName);
let thAge = document.createElement('th');
thAge.innerHTML = 'Age';
tr.appendChild(thAge);
let thGender = document.createElement('th');
thGender.innerHTML = 'Gender';
tr.appendChild(thGender);
thead.appendChild(tr);
table.appendChild(thead);
let tbody = document.createElement('tbody');
table.appendChild(tbody);
document.body.appendChild (table);
}

Maintenant, appelez la fonction createTable pour créer la table.

createTable();

2. Ajouter une pagination

En JavaScript, créez une nouvelle fonction nommée "pagination". Cette fonction filtrera les données du tableau en fonction de la quantité requise de données par page et du numéro de page actuel, et affichera. les résultats dans le formulaire.

// Fonction de pagination

function pagination(pageSize, pageNumber) {

let table = document.getElementById('table-page');
let tbody = table.querySelector('tbody');
let start = pageSize * ( pageNumber - 1);
let end = start + pageSize;
let d = tableData.slice(start, end);
tbody.innerHTML = '';
for (let i = 0; i < d.length; i++ ) {

let tr = document.createElement('tr');
for (let key in d[i]) {
  let td = document.createElement('td');
  td.innerHTML = d[i][key];
  tr.appendChild(td);
}
tbody.appendChild(tr);
Copier après la connexion

}

}


Dans cette fonction, récupérez d'abord l'élément table et l'élément tbody. Ensuite, la plage de données à afficher est calculée en utilisant la quantité spécifiée de données par page et le numéro de page actuel. Ensuite, utilisez la méthode slice pour afficher les données sur la page actuelle et ajoutez-les à l'élément tbody du tableau dans une boucle.

3. Créez le composant de pagination

Ensuite, créez une fonction appelée "createPagination" pour générer le composant de pagination.

//Créer un composant de bouton de pagination

function createPagination(pageSize) {

let totalPage = Math.ceil(tableData.length / pageSize);
let pagination = document.getElementById('pagination');
if (!pagination) {

pagination = document.createElement('div');
pagination.id = 'pagination';
document.body.appendChild(pagination);
Copier après la connexion

}

pagination.innerHTML = '';

for (let i = 1; i <= totalPage; i++) {

let btn = document.createElement('button');
btn.innerHTML = i;
btn.onclick = function() {
  pagination(pageSize, i)
};
pagination.appendChild(btn); 
Copier après la connexion

}

}


Cette fonction comptera le nombre de toutes les pages, en fonction de chacune page Composant bouton de génération de quantité. Au sein de la boucle, chaque bouton est créé et attaché à l'élément "pagination". Enfin, définissez l'événement click du bouton pour appeler la fonction de pagination "pagination()".

4. Appliquer aux projets réels

Dans les projets réels, vous pouvez remplacer le tableau tableData par des données obtenues à partir du serveur et appeler les fonctions de création et de pagination de table si nécessaire.

// Demander des données de manière asynchrone

let xhr = new XMLHttpRequest();

xhr.open('GET', '/getData');
xhr.onload = function() {
let data = JSON.parse(xhr. réponseText);
tableData = data;
createTable();
pagination(pageSize, pageNumber);
createPagination(pageSize);
}
xhr.send();

Dans cet exemple, un objet XMLHttpRequest est utilisé pour obtenir des données de manière asynchrone. Ensuite, les données sont analysées dans un objet JSON et les fonctions createTable, pagination et createPagination sont appelées respectivement.

5. Résumé

Grâce aux étapes ci-dessus, nous avons utilisé avec succès JavaScript pour implémenter la fonction de base d'affichage des données du tableau dans les pages. Lorsque la quantité de données est importante, cette méthode améliorera considérablement les performances du tableau et offrira également aux utilisateurs une meilleure expérience interactive. Après tout, une expérience utilisateur pratique et simple fait le charme des logiciels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal