Faire des tables dynamiques en quelques secondes à partir de toutes les données JSON

Tables interactives dynamiques faciles à créer avec un tabulateur de plugin d'interface utilisateur JQuery léger! Cet article vous guidera comment convertir les données JSON en tables interactives dynamiques avec très peu de code JavaScript.

Points de base:

• Paramètres rapides: Le plugin de tabulator vous permet de convertir les données JSON en tables interactives dynamiques avec juste une petite quantité de code JavaScript.
• Colonnes personnalisées: Vous pouvez définir et personnaliser les colonnes de table à travers des paramètres tels que le titre, les champs, le tri, la largeur et le formateur pour répondre à vos besoins spécifiques.
• Chargement flexible des données: Le tabulateur prend en charge une variété de méthodes de chargement de données, y compris les tableaux JavaScript, les demandes AJAX et la conversion des tables HTML existantes.
• Interactivité améliorée: Tri, filtrage et édition intégrés pour une meilleure expérience utilisateur.
• Fonctionnalités étendues: Explorez des fonctionnalités plus avancées telles que les trieurs et les formateurs personnalisés, le regroupement de lignes, les colonnes mobiles et la pagination pour créer des tables puissantes.

Cet article a été examiné par Stephan Max et Simon Codrington. Merci à tous les pairs examinateurs de SitePoint pour avoir rendu le contenu de SitePoint parfait!

Les tables HTML standard sont très pratiques pour la mise en page des données de base, mais que se passe-t-elle si vous avez besoin de fonctionnalités de table plus puissantes? Par exemple, obtenir des données d'une API externe, ce qui rend les tables triables ou modifiables, vous avez besoin d'un outil plus puissant.

Si cela vous semble familier, alors le tabulateur est le choix parfait pour vous. Le tabulateur est un plugin d'interface utilisateur JQuery léger conçu pour simplifier la construction de tables interactives complexes. Avec seulement quelques lignes de code JavaScript, vous pouvez convertir presque toutes les sources de données en une table interactive magnifiquement formatée.

Ce tutoriel vous guide à travers les étapes de base de la création du premier tabulateur, puis étend certaines des options disponibles pour ajouter des fonctionnalités supplémentaires à votre table.

Créez votre premier tabulateur

Commençons par créer une table très simple.

Étant donné que Tabulator est un widget jQuery, vous devez inclure des bibliothèques JQuery et jQuery Inter Inter, que ce soit à partir d'une source locale ou d'un CDN de votre choix.

Vous devez obtenir une copie de la bibliothèque du tabulateur (peut être cloné à partir du référentiel GitHub: https://www.php.cn/link/f7eabb16f5527507fc1236f156c5b816 .

<code class="language-html"><link rel="stylesheet" href="tabulator.css">
</code>

Créez un élément <div> pour maintenir la table: <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-html&quot;&gt;&lt;div id=&quot;example-table&quot;&gt;&lt;/div&gt;&lt;/code&gt;</pre> <p> Utilisons un javascript pour convertir cet élément en tabulatrice: </p> <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;$(&quot;#example-table&quot;).tabulator();&lt;/code&gt;</pre> <p> c'est tout, une table entièrement fonctionnelle! </p> <p> D'accord, nous ne sommes pas complètement terminés. Pour compléter notre tableau, nous devons définir les colonnes et charger certaines données. </p> <p> <strong> Colonne de définition </strong> </p> <p> Pour définir la disposition d'une table, nous devons fournir des informations sur chacune de ses colonnes. </p> <p> Nous le faisons en passant un tableau de définitions de colonnes au constructeur du tabulateur. Chaque objet du tableau représente une colonne de la table et contient ses paramètres de réglage: </p> <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-html&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;tabulator.css&quot;&gt; &lt;/code&gt;</pre> <p> Il existe de nombreux paramètres de colonne disponibles, et dans cette démonstration, nous en couvrirons certains: </p> <ul> <li> <code>title - requis - Titre à afficher dans les en-têtes de colonne

field - requis - Clé des colonnes dans le tableau de données

align - Alignement du texte des colonnes (gauche | Centre | à droite)

width - Largeur de colonne (si elle n'est pas définie, le système déterminera la taille optimale)

sortable - Communiquez si l'utilisateur peut trier les données par colonne

sorter - Comment trier les données dans une colonne (par défaut est une chaîne)

formatter - Comment formater les données dans les colonnes (par défaut est une chaîne)

onClick - Fonction de rappel lorsqu'un utilisateur clique sur une cellule dans une colonne

editable - Si les utilisateurs sont autorisés à modifier ces données

editor - Éditeur utilisé lorsque les cellules d'une colonne sont modifiables

visible - Afficher ou masquer les colonnes

Chargez les données dans la table

L'étape finale de la construction d'un nouveau tabulateur consiste à charger certaines données. Il y a plusieurs options pour cela, et nous couvrirons brièvement chacun ici.

Array JavaScript

Vous pouvez utiliser la méthode setData pour passer dans un tableau de données. Cela nécessite un tableau, et chaque ligne de la table est définie par un objet.

Créons quelques exemples de données:

<code class="language-html"><div id="example-table"></div></code>

puis attribuez-le à notre formulaire:

<code class="language-javascript">$("#example-table").tabulator();</code>

Demande AJAX

Pour récupérer les données au format JSON à partir d'une source distante, vous pouvez transmettre l'URL à la méthode setData, qui vous effectuera la demande AJAX.

<code class="language-javascript">$("#example-table").tabulator({
  columns:[
    {title:"Name", field:"name", sortable:true, width:200},
    {title:"Progress", field:"progress", sortable:true, sorter:"number"},
    {title:"Gender", field:"gender", sortable:true},
    {title:"Favourite Color", field:"col", sortable:false},
    {title:"Date Of Birth", field:"dob"},
    {title:"Cheese Preference", field:"cheese"},
  ],
});</code>

D'autres paramètres de demande peuvent être passés dans un objet contenant l'URL.

<code class="language-javascript">var sampleData = [
  {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"", car:1, lucky_no:5, cheese:"Cheader"},
  {id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true, lucky_no:10, cheese:"Gouda"},
  {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true", lucky_no:12, cheese:"Manchego"},
  {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980", lucky_no:18, cheese:"Brie"},
  {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999", lucky_no:33, cheese:"Cheader"},
];</code>

Html Form

Vous pouvez également convertir les tables HTML existantes en tabulateur.

Créez votre table HTML:

<code class="language-javascript">$("#example-table").tabulator("setData", sampleData);</code>

Ensuite, appelez le constructeur du tabulateur sur l'élément de table pour extraire automatiquement le titre et les données:

<code class="language-javascript">$("#example-table").tabulator("setData", "http://www.exampleurl.com/data");</code>

Le résultat final

Vous avez construit le tableau, défini les colonnes et chargé les données, et maintenant vous avez une table interactive entièrement fonctionnelle. Votre tabulateur de travail doit ressembler à ceci: (le lien de codepen ou l'image de l'échantillon doit être inséré ici)

Fonctions en ligne

mais ce n'est pas tout! Pourquoi se contenter de tables de texte simples alors que vous pouvez faire plus pour améliorer l'apparence, la sensation et l'interactivité d'une table? Dans les prochaines sections, nous couvrirons certaines fonctionnalités supplémentaires que vous pouvez ajouter pour améliorer votre tabulateur.

(Le contenu suivant est similaire au texte d'origine, mais la langue doit être ajustée et rationalisée, éviter la duplication et maintenir la maîtrise. Pensez à utiliser des paragraphes plus simples et un langage plus raffiné pour décrire le tri, la mise en forme, le filtrage et l'édition, etc. .

(Descriptions de fonctions telles que le tri, la mise en forme, le filtrage, l'édition, etc. doivent être rationalisées et réorganisées)

Un exemple complet

Si nous combinons toutes les leçons que nous avons apprises ci-dessus, nous pouvons créer une forme riche et interactive. (Le lien de codepen ou un exemple d'image doit être inséré ici)

La pointe de l'iceberg

Nous avons couvert comment créer un tabulateur de base et ajouter des fonctionnalités pour améliorer son apparence et son utilisation.

Cet article ne présente la pointe de l'iceberg lors de la création et de la personnalisation des tables. Cette bibliothèque contient de nombreuses fonctionnalités qui aident les utilisateurs à une expérience plus riche:

GRASSION DE LIGNES
lignes et colonnes mobiles
pagination
Styles et thèmes CSS
Rendu progressif des grands ensembles de données
Disposition permanente de la colonne
• (stockage des préférences des utilisateurs dans les cookies)
Fonction de rappel à chaque étape du rendu de la table et chaque type d'interaction utilisateur

J'espère que cet article vous montrera comment faire passer votre table HTML de base au niveau suivant, en ajoutant de l'interactivité et du style à vos données.

Je vous souhaite une bonne utilisation du tabulateur!

(Section FAQ, qui doit être rationalisée et réorganisée)

(Section FAQ, qui doit être rationalisée et réorganisée) Cette partie peut être réduite à plusieurs questions de base et répondu dans un langage concis. Par exemple, vous pouvez combiner plusieurs questions sur la façon de traiter les données JSON à l'aide de JavaScript et la convertir en tables HTML et fournir une réponse généralisée. Évitez la répétition et assurez-vous que les réponses sont exactes et faciles à comprendre.