Comment implémenter la pagination dans les tables Layui?

Implémentation de pagination dans des tables Layui

Le composant de table de Layui offre une fonctionnalité de pagination intégrée, simplifiant le processus d'affichage de grands ensembles de données de manière conviviale. La clé réside dans l'utilisation de l'option page dans la méthode table.render() . Cette option accepte un objet contenant divers paramètres de pagination. Voici une ventilation:

Tout d'abord, vous devez inclure les fichiers Layui Javascript et CSS dans votre HTML. Ensuite, vous utiliserez la méthode table.render() pour initialiser votre table. Surtout, vous inclurez l'objet page dans les options. Cet objet permet un contrôle à grains fins sur la pagination. Par exemple:

 <code class="javascript">layui.use('table', function(){ var table = layui.table; table.render({ elem: '#myTable' // Specify the table element ,url: '/data.json' // URL to fetch data (can be server-side) ,cols: [[ // Table columns definition {field:'id', title:'ID', width:80, sort: true} ,{field:'username', title:'Username', width:120} ,{field:'email', title:'Email', width:200} ,{field:'joinTime', title:'Join Time', width:180} ]] ,page: { // Pagination options layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] // Customize pagination layout ,limit: 10 // Number of items per page ,limits: [10, 20, 30, 40, 50] // Available page size options } ,id: 'myTableId' // Assign an ID to the table instance for future manipulation }); });</code>

Dans cet exemple, url pointe vers une source de données (pourrait être un fichier JSON local ou un point de terminaison côté serveur). L'objet page spécifie une limite de 10 éléments par page et offre aux choix d'utilisateurs de 10, 20, 30, 40 ou 50 éléments par page. L'option layout permet la personnalisation des commandes de pagination. N'oubliez pas de remplacer /data.json par votre source de données réelle. L'attribut id est essentiel pour la manipulation ultérieure du tableau.

Pièges communs à éviter lors de la pagination de tables Layui

Plusieurs erreurs courantes peuvent entraver l'utilisation efficace de la pagination de la table de Layui:

• Gestion des données incorrectes: le non-gérer correctement les données renvoyées à partir de votre script côté serveur est un piège majeur. Assurez-vous que votre serveur renvoie les données dans un format que Layui attend (généralement JSON). Le JSON doit contenir à la fois les données de la page actuelle et le nombre total d'enregistrements. Layui utilise ce nombre total pour rendre avec précision les contrôles de pagination.
• Ignorer les paramètres de l'objet page : la négligence de configurer l'objet page dans table.render() entraînera aucune pagination. Portez une attention particulière aux paramètres tels que curr , limit et limits pour contrôler la page actuelle, les éléments par page et les options disponibles, respectivement.
• Mises à jour de données incohérentes: lors de la mise à jour des données du tableau (par exemple, après une recherche ou un filtre), vous devez réintégrer le tableau avec les données et les paramètres de pagination mis à jour. La simple modification des données ne metra pas automatiquement à jour la pagination. Utilisez la méthode table.reload() à cet effet.
• Pagination uniquement uniquement avec de grands ensembles de données: la mise en œuvre de pagination uniquement sur le côté client avec des ensembles de données extrêmement grands est très inefficace et aura un impact négatif sur les performances. La pagination côté serveur est cruciale pour gérer des quantités substantielles de données.

Personnalisation de l'apparence des commandes de pagination

Layui offre une certaine flexibilité dans la personnalisation de l'apparence des commandes de pagination. Bien qu'il ne fournit pas d'options de personnalisation CSS approfondies directement dans l'objet page , vous pouvez réaliser des changements visuels significatifs via les remplacements CSS. Cela implique de cibler les classes CSS spécifiques utilisées par la composante de pagination de Layui. L'inspection du HTML rendu de vos contrôles de pagination à l'aide des outils de développement de votre navigateur révélera les classes pertinentes.

Par exemple, vous pouvez modifier les couleurs, les tailles de police ou l'espacement des éléments de pagination en ajoutant des règles CSS personnalisées:

 <code class="css">.layui-table-page .layui-laypage-prev, .layui-table-page .layui-laypage-next { background-color: #007bff; /* Example: Change button background color */ color: white; } .layui-table-page .layui-laypage-curr { background-color: #28a745; /* Example: Change current page indicator color */ }</code>

N'oubliez pas que les classes CSS de Layui sont sujettes à changer entre les versions, alors reportez-vous toujours à la documentation officielle LayUI pour les noms de classe les plus récents. Utilisez les outils de développeur de votre navigateur pour identifier les classes actuelles appliquées aux éléments de pagination de votre version LayUI spécifique.

Intégration de la pagination côté serveur avec ma table LayUi

La pagination côté serveur est essentielle pour les performances, en particulier avec de grands ensembles de données. Il s'agit de demander uniquement les données nécessaires à la page actuelle de votre serveur. Votre script côté serveur (par exemple, en php, node.js, python, etc.) doit gérer la logique de pagination. Il doit accepter les paramètres représentant le numéro de page ( page ou curr ) et les éléments par page ( limit ) et renvoyer une réponse JSON contenant:

• data : un tableau de données pour la page actuelle.
• count : le nombre total d'enregistrements.

Votre appel table.render() pointerait alors vers ce script côté serveur, et le composant de pagination de Layui utilisera la valeur count pour rendre correctement les contrôles de pagination.

Par exemple, si votre script côté serveur est à /api/data , votre code LayUi peut ressembler à ceci:

 <code class="javascript">layui.use('table', function(){ var table = layui.table; table.render({ elem: '#myTable' ,url: '/api/data' // ... other table options ... ,page: true // Enable pagination }); });</code>

Votre script côté serveur recevrait ensuite la page et limit les paramètres et renvoie les données appropriées et le nombre total. Cela garantit que seules les données nécessaires sont récupérées et traitées, améliorant considérablement les performances et l'évolutivité. N'oubliez pas d'ajuster l'URL et la gestion des données pour correspondre à votre technologie et à l'API côté serveur spécifiques.

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!