Utilisation de la pagination des tables de données-tutoriel CSS-php.cn

Utilisation de la pagination des tables de données

WBOY

Libérer： 2023-08-27 16:21:06

avant

1240 Les gens l'ont consulté

Utilisation de la pagination des tables de données

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 de

Syntaxe

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

Copier après la connexion

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 de

Exemple 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>

Copier après la connexion

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>

Copier après la connexion

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!