Comment utiliser le composant de table de Layui pour afficher des données?

Comment utiliser le composant de table de Layui pour afficher des données?

Le composant de table de Layui fournit un moyen simple mais puissant d'afficher les données dans un format tabulaire. Le cœur de l'utilisation consiste à configurer la structure du tableau à l'aide de HTML, puis à les remplir avec des données à l'aide de JavaScript. Voici une ventilation:

Tout d'abord, vous devez inclure les fichiers LayUI CSS et JavaScript dans votre HTML:

 <code class="html"><link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script></code>

Ensuite, vous créez un élément table dans votre HTML, qui servira de conteneur pour votre table. Cet élément a besoin d'un attribut id pour que LayUI le cible. Vous pouvez également inclure éventuellement une structure de table de base:

 <code class="html"><table id="demo" lay-filter="test"></table></code>

L'attribut lay-filter est crucial; Il est utilisé pour identifier l'instance de table pour une manipulation ultérieure.

Enfin, vous utilisez JavaScript pour rendre les données de table à l'aide de layui.table.render() . Cette fonction prend un objet comme argument, spécifiant diverses options comme l'ID d'élément ( elem ), les données ( data ), les colonnes ( cols ) et d'autres configurations. Voici un exemple:

 <code class="javascript">layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo' ,cols: [[ //标题栏{field: 'id', title: 'ID', width:80, sort: true} ,{field: 'username', title: '用户名', width:80} ,{field: 'email', title: '邮箱', width:120} ,{field: 'sex', title: '性别', width:80} ,{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '签名', width:170} ]] ,data: [ //假设数据{'id':'1','username':'张三','email':'zhangsan@gmail.com','sex':'男','city':'西安','sign':'hello'} ,{'id':'2','username':'李四','email':'lisi@gmail.com','sex':'女','city':'北京','sign':'hello world'} ] ,page: true //开启分页}); });</code>

Ce code rend une table avec les colonnes et les données spécifiées. N'oubliez pas de remplacer les exemples de données par vos données réelles. L'option page: true permet la pagination (expliquée plus loin ci-dessous).

Puis-je personnaliser les colonnes dans le composant de table de Layui?

Oui, le composant de table de Layui offre une personnalisation étendue de colonne. Vous pouvez contrôler divers aspects de chaque colonne, notamment:

• field : la clé de données correspondant à la colonne. C'est ainsi que LayUi mappe les données des colonnes.
• title : Le texte de l'en-tête de colonne.
• width : la largeur de la colonne (en pixels ou en pourcentage).
• sort : permet le tri pour cette colonne (true / false).
• templet : une fonction ou un modèle de chaîne pour personnaliser la façon dont les données sont affichées dans la cellule. Cela permet un formatage complexe, y compris l'utilisation d'icônes, de liens ou d'autres éléments HTML. Par exemple, vous pouvez utiliser un modèle pour afficher l'état d'un utilisateur avec une icône colorée.
• toolbar : vous permet d'ajouter des boutons ou des actions personnalisés dans la cellule de chaque ligne. Ceci est utile pour créer des opérations d'édition, de suppression ou d'autres opérations spécifiques à des lignes.
• edit : Active l'édition de cellules sur place. Cela permet aux utilisateurs de modifier directement les données dans le tableau.
• type : vous permet de spécifier différents types de colonnes comme 'Checkbox' pour ajouter des cases à cocher à chaque ligne.

Voici un exemple démontrant templet et toolbar :

 <code class="javascript">cols: [[ {field: 'status', title: 'Status', templet: function(d){ return d.status === 1 ? '<span style="color:green;">Active</span>' : '<span style="color:red;">Inactive</span>'; }} ,{field: 'actions', title: 'Actions', toolbar: '#barDemo'} ]]</code>

Cela ajoute une colonne d'état avec coloration conditionnelle et une colonne d'action avec des boutons personnalisés définis dans un modèle avec le barDemo ID.

Comment gérer la pagination avec le composant de table de Layui?

Le composant de table de Layui simplifie la pagination. Pour activer la pagination, définissez simplement l'option page sur true dans le table.render() Fonction:

 <code class="javascript">table.render({ // ... other options ... page: true });</code>

Cela ajoutera automatiquement des commandes de pagination au bas de la table. Layui gère la récupération et l'affichage des données pour chaque page. Vous pouvez personnaliser davantage la pagination en spécifiant des options supplémentaires:

• limit : le nombre de lignes par page.
• limits : un tableau d'options pour le nombre de lignes par page que les utilisateurs peuvent sélectionner.
• layout : contrôle quels éléments de pagination sont affichés (par exemple, «count», «prev», «page», «Next», «limite», «skip»).
• curr : Spécifie le numéro de page actuel. Utile lors du chargement d'une page spécifique.

Pour les ensembles de données plus grands, vous voudrez généralement récupérer les données de votre API backend en morceaux en fonction du numéro de page actuel et limit . Ceci est couvert dans la section suivante.

Comment puis-je intégrer le composant de table de Layui avec mon API backend?

L'intégration du tableau de LayUi avec une API backend implique la récupération de données à l'aide de AJAX (généralement avec JQuery's $.ajax() ou de l'API fetch() intégrée du navigateur), puis de passer ces données à la fonction table.render() . Vous devrez généralement ajuster vos appels API en fonction de la page actuelle et limiter.

Voici un exemple utilisant fetch() :

 <code class="javascript">layui.use('table', function(){ var table = layui.table; let currentPage = 1; let pageSize = 10; function fetchData(page, limit) { return fetch(`/api/data?page=${page}&limit=${limit}`) .then(response => response.json()) .then(data => { return { data: data.items, // Assuming your API returns an object with 'items' property count: data.totalCount // Assuming your API returns total count }; }); } fetchData(currentPage, pageSize).then(data => { table.render({ elem: '#demo', cols: [[ /* ... your columns ... */ ]], data: data.data, page: { curr: currentPage, limit: pageSize, count: data.count } }); }); });</code>

Ce code récupère les données de /api/data , passant le numéro de page et limite en tant que paramètres de requête. La réponse est ensuite utilisée pour rendre le tableau. N'oubliez pas d'ajuster le point de terminaison et la structure de données de l'API pour correspondre à votre backend. Vous ajouteriez également généralement des auditeurs d'événements pour gérer les modifications de pagination et mettre à jour currentPage en conséquence, en réapparaissant les données lorsque la page change. Les indicateurs de gestion des erreurs et de chargement sont également des considérations importantes pour une implémentation prête pour la production.

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!