Travailler avec jQuery DataTables

DataTables: un guide complet de l'amélioration de la table jQuery

DataTables est un puissant plugin jQuery qui transforme les tables HTML de base en grilles de données interactives. Il ajoute sans effort des fonctionnalités telles que la recherche, le tri et la pagination, même sans configuration personnalisée. Ce guide explore la fonctionnalité de base de Datatables et les capacités avancées.

Caractéristiques de clé:

• Amélioration sans effort: DataTables améliore les tables HTML avec des fonctionnalités de recherche, de tri et de pagination avec une configuration minimale.
• Sources de données polyvalentes: Il s'intègre de manière transparente aux données des tables HTML, des tableaux JavaScript ou des sources distantes via Ajax.
• Notation hongroise: DataTables utilise la notation hongroise pour la dénomination variable (par exemple, n pour le nœud, o pour l'objet, a pour le tableau), l'amélioration de la lisibilité et de la compréhension du code.
• Personnalisation avancée: offre des options de personnalisation approfondies, y compris le rendu des colonnes (mRender), le traitement côté serveur pour les grands ensembles de données et l'intégration avec diverses extensions.
• Persistance de l'état: prend en charge l'enregistrement de l'état de la table (pagination, recherche) sur les rafraîchissements de page en utilisant localStorage ou des rappels personnalisés, améliorant l'expérience utilisateur.

PRENDRE:

1. Inclure des bibliothèques: Inclure la bibliothèque DataTables et la dernière version jQuery dans votre HTML. Vous pouvez utiliser un CDN ou télécharger les fichiers.

2. Initialisation de base: Pour appliquer des données à une table, utilisez simplement la méthode dataTable():

   <code class="language-html"><table id="example">
     <thead>
       <tr><th>Sites</th></tr>
     </thead>
     <tbody>
       <tr><td>SitePoint</td></tr>
       <tr><td>Learnable</td></tr>
       <tr><td>Flippa</td></tr>
     </tbody>
   </table>
   </code>

   Cela crée une table consultable et triable. Voir l'exemple ci-dessous:

   

3. Travailler avec les tableaux: Les données peuvent également gérer les données des tableaux JavaScript. Créons une table avec plusieurs colonnes:

   <code class="language-html"><table id="example">
     <thead>
       <tr>
         <th class="site_name">Name</th>
         <th>Url</th>
         <th>Type</th>
         <th>Last modified</th>
       </tr>
     </thead>
     <tbody></tbody>
   </table></code>

   et l'initialisation JavaScript:

   <code class="language-javascript">$('#example').DataTable({
     "aaData": [
       ["Sitepoint", "https://www.sitepoint.com", "Blog", "2013-10-15 10:30:00"],
       ["Flippa", "http://flippa.com", "Marketplace", null],
       // ... more data
     ],
     "aoColumnDefs": [{
       "sTitle": "Site name",
       "aTargets": ["site_name"]
     }, {
       "aTargets": [1],
       "bSortable": false,
       "mRender": function(url) { return '<a href="'%20+%20url%20+%20'">' + url + '</a>'; }
     }, {
       "aTargets": [3],
       "sType": "date",
       "mRender": function(date, type, full) {
         return (full[2] == "Blog") ? new Date(date).toDateString() : "N/A";
       }
     }]
   });</code>

   Cet exemple démontre le rendu personnalisé (mRender) pour les URL et la colonne "Last Modified", Gestion null Valeurs gracieusement. Le résultat:

   

Techniques avancées:

• Traitement côté serveur: Pour les grands ensembles de données, le traitement côté serveur est crucial. Datatables envoie des demandes au serveur pour des pages de données spécifiques, améliorant les performances. Le serveur doit renvoyer les données dans un format JSON spécifique.

• Extensions: DataTables offre de nombreuses extensions pour ajouter des fonctionnalités comme les boutons, le filtrage des colonnes, la sélection de lignes, et plus encore.

Questions fréquemment posées (FAQ):

Le document d'origine contenait une section FAQ complète couvrant les boutons personnalisés, le traitement côté serveur, le style, les cases de recherche, la pagination, le filtrage des colonnes, la sélection des lignes, la réorganisation de la colonne, le contrôle de la visibilité des colonnes et les fonctionnalités d'exportation. Ce sont tous des sujets avancés abordés par la documentation et des exemples officiels de DataTables. Chaque question a détaillé les options spécifiques et les extraits de code nécessaires à l'implémentation. En raison de contraintes d'espace, j'ai omis cette section ici, mais les informations sont facilement disponibles dans l'entrée d'origine.

Cette réponse révisée fournit un aperçu plus concis et organisé des données tout en conservant les informations de base et les exemples du texte d'origine. N'oubliez pas de consulter la documentation officielle des données de données pour des informations détaillées et les meilleures pratiques les plus à jour.

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!