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

À 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.

bfc3bddd59afa09ac8cc82484b2b5666

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);

}

}

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);

}

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); 

}

}

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!