Maison >interface Web >tutoriel CSS >Utilisation de la pagination des tables de données
Utilisation de la pagination des tables de données
- WBOYavant
- 2023-08-27 16:21:061250parcourir
Nous pouvons utiliser la technologie de pagination pour afficher de grandes quantités de données en morceaux plus petits. Par exemple, les magasins en ligne comme Amazon et Flipkart répertorient des millions de produits. Ainsi, s'ils n'utilisent pas la technologie de pagination pour afficher les données, l'utilisateur devra faire défiler jusqu'à la fin de la page Web pour voir le dernier produit. Pensez maintenant au temps de défilement nécessaire pour accéder au dernier produit parmi des millions de produits.
Dans la technologie de pagination, nous affichons une quantité spécifique de données sur une seule page. Par exemple, si nous définissons la longueur de chaque page sur 100, l'utilisateur peut voir les 100 premiers produits sur la première page, 100 autres produits sur la deuxième page, et ainsi de suite.
Dans jQuery, le plugin Datatables est utilisé pour formater les données des tableaux HTML. De plus, il permet d'ajouter une fonctionnalité de pagination aux tableaux.
La traduction chinoise deSyntaxe
est :Grammaire
Les utilisateurs peuvent utiliser l'API Datatables pour ajouter une pagination aux tableaux en utilisant la syntaxe suivante.
$('selector').DataTable({
"paging": boolean,
"pageLength": number
});
Dans la syntaxe ci-dessus, l'utilisateur peut utiliser la valeur booléenne « vrai » ou « faux » pour afficher ou masquer la pagination. La propriété pageLength spécifie le nombre total d'entrées affichées sur une seule page.
La traduction chinoise deExemple 1
est :Exemple 1
Dans l'exemple ci-dessous, nous créons un tableau des données de la carte. De plus, nous avons ajouté un « id » avec la valeur « car ».
Dans jQuery, nous accédons à la table en utilisant son identifiant et exécutons la fonction DataTable(). De plus, nous transmettons cet objet comme argument à la méthode datatable(). Cet objet contient « pagination : true » et « pageLength : 3 » pour définir la pagination, affichant 3 éléments par page.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
<link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<script src = "https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"> </script>
<style>
.car-table {
width: 500px;
}
</style>
</head>
<body>
<h2>Using the <i> Datatables to show pagination </i> in the table.</h2>
<div class = "car-table">
<table id = "car">
<thead>
<tr>
<th> Model </th>
<th> Year </th>
<th> Country </th>
<th> Brand </th>
</tr>
</thead>
<tbody>
<tr>
<td> Toyota </td>
<td> Auris </td>
<td> 2017 </td>
<td> Japan </td>
</tr>
<tr>
<td> Toyota </td>
<td> Avensis </td>
<td> 2016 </td>
<td> Japan </td>
</tr>
<tr>
<td> Honda </td>
<td> Civic </td>
<td> 2018 </td>
<td> Japan </td>
</tr>
<tr>
<td> Tata </td>
<td> Nexon </td>
<td> 2022 </td>
<td> India </td>
</tr>
<tr>
<td> Maruti </td>
<td> Baleno </td>
<td> 2019 </td>
<td> India </td>
</tr>
<tr>
<td> Maruti </td>
<td> Swift </td>
<td> 2017 </td>
<td> India </td>
</tr>
<tr>
<td> Hyundai </td>
<td> Verna </td>
<td> 2018 </td>
<td> South Korea </td>
</tr>
</tbody>
</table>
</div>
<div id="paginationContainer"></div>
<script>
$(document).ready(function () {
var table = $('#car').DataTable({
"paging": true,
"pageLength": 3
});
});
</script>
</body>
</html>
Exemple 2
Dans l'exemple ci-dessous, nous avons créé un tableau pour stocker les données relatives à l'alimentation. Ici, nous créons un ensemble d'objets contenant des informations sur les aliments telles que le nom de l'aliment, les calories, les graisses, les glucides, etc.
Après cela, nous parcourons le tableau, créons une ligne de tableau pour chaque objet du tableau et l'ajoutons au corps du tableau. De plus, nous avons exécuté la méthode dataTables() sans transmettre aucun paramètre pour la table alimentaire.
Dans la sortie, l'utilisateur peut constater que par défaut 10 valeurs sont affichées par page. Cependant, l'utilisateur peut le modifier entre 50 et 100.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
<link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<script src = "https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"> </script>
<style>
.food-table { width: 500px;}
</style>
</head>
<body>
<h2>Using the <i> Datatables to show pagination </i> in the table.</h2>
<div class = "food-table">
<table id = "food">
<thead>
<tr>
<th> Food </th>
<th> Calories </th>
<th> Fat </th>
<th> Carbs </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="paginationContainer"></div>
<script>
// create array of above table
const foods = [
{ name: "Bread", calories: 100, fat: 10, carbs: 20 },
{ name: "Butter", calories: 50, fat: 5, carbs: 10 },
{ name: "Avocado", calories: 500, fat: 50, carbs: 60 },
{ name: "Apple", calories: 600, fat: 60, carbs: 70 },
{ name: "Orange", calories: 700, fat: 70, carbs: 80 },
{ name: "Watermelon", calories: 800, fat: 80, carbs: 90 },
{ name: "Strawberry", calories: 900, fat: 90, carbs: 100 },
{ name: "Blueberry", calories: 1000, fat: 100, carbs: 110 },
{ name: "Raspberry", calories: 1200, fat: 120, carbs: 130 },
{ name: "Cherry", calories: 1300, fat: 130, carbs: 140 },
{ name: "Plum", calories: 1400, fat: 140, carbs: 150 },
{ name: "Peach", calories: 1500, fat: 150, carbs: 160 },
{ name: "Pear", calories: 1600, fat: 160, carbs: 170 },
{ name: "Grapes", calories: 1700, fat: 170, carbs: 180 },
{ name: "Banana", calories: 1800, fat: 180, carbs: 190 },
{ name: "Pineapple", calories: 1900, fat: 190, carbs: 200 },
{ name: "Mango", calories: 2000, fat: 200, carbs: 210 },
{ name: "Papaya", calories: 2100, fat: 210, carbs: 220 },
{ name: "Kiwi", calories: 2200, fat: 220, carbs: 230 },
{ name: "Grapefruit", calories: 2300, fat: 230, carbs: 240 },
{ name: "Lemon", calories: 2400, fat: 240, carbs: 250 },
{ name: "Lime", calories: 2500, fat: 250, carbs: 260 },
]
// accessing the table and adding data
const table = document.querySelector('#food tbody')
foods.forEach(food => {
const row = document.createElement('tr')
row.innerHTML = `
<td> ${food.name} </td>
<td> ${food.calories} </td>
<td> ${food.fat} </td>
<td> ${food.carbs} </td>
`
table.appendChild(row)
})
$(document).ready(function () {
var table = $('#food').DataTable();
});
</script>
</body>
</html>
Nous avons appris à utiliser le plug-in DataTable de jQuery pour ajouter une fonctionnalité de pagination au tableau. Nous avons également appris à définir une longueur de page personnalisée. De plus, nous pouvons créer un champ de saisie personnalisé pour recevoir la longueur de la page et définir la longueur de la page en fonction des préférences de l'utilisateur.
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!