Introduction à la table de tri dans layui
Aujourd'hui, parlons du tri des tables. Laissez-moi vous donner un aperçu, le but est de faire la distinction entre le tri frontal et le tri du serveur. La pagination actuelle des tableaux est en fait assez "désordonnée", je crois que de nombreux étudiants qui l'utilisent depuis un certain temps, en particulier ceux qui le font. Le tri du serveur rencontrera cette situation dans une certaine mesure.
Recommandé : Tutoriel Layui
Examinons d'abord l'effet du tri fourni avec le tri layui par dictionnaire n'est pas l'objet de cette discussion. et si Il y a des situations où des entiers négatifs et 0 apparaissent
Alors pouvons-nous ajuster la logique de manière à ce que la logique de jugement des nombres négatifs et 0 soit correcte ? Ce n’est en fait pas l’objet de cette discussion.
Le fait est que le tri du serveur. En fait, le tri de la plupart des tableaux n'est pas simplement un simple tri d'une seule page, mais les conditions sont transmises à l'arrière-plan pour le tri par l'arrière-plan. , il s'agit de surveiller le tri, puis de recharger et de transmettre les conditions. Tout est ok et la logique est bonne.
Mais quel est l’effet réel ? Parce que le tableau actuel ne fait pas de distinction entre le tri au premier plan et le tri du serveur, après avoir reçu les données puis rendu le tableau, il est déterminé qu'il y a initSort, puis les données seront à nouveau triées puis affichées. Cela présente un problème très sérieux !
Évidemment que le serveur l'a trié, pourquoi devons-nous le trier à nouveau en js ? Plus sérieusement, peut-on s'assurer que le résultat du tri est cohérent avec le résultat de la règle de tri en arrière-plan ? Quelle garantie y a-t-il ?
Regardez le code ci-dessous lorsqu'il surveille le rechargement, puis simule l'arrière-plan pour renvoyer les données selon la règle des nombres négatifs
Code :
Effet
Vous pensez peut-être qu'il n'y a pas de différence avec le précédent, mais le tri est toujours erroné. C'est une exception. . lieu. Jetez un œil à la structure des données renvoyées par ma simulation
Données d'origine :
Données renvoyées par l'interface simulée :
Après ce retour , c'est évident L'effet affiché ne correspond pas à l'ordre des données réelles
La raison est celle mentionnée ci-dessus. Lors de l'envoi réel du tri en arrière-plan, vous devez toujours passer par le tri frontal lorsqu'il est effectué. temps de rendu, ce qui équivaut à effectuer un processus superflu. En fait, si l'on définit les données renvoyées par le tri du serveur, ce sera l'ordre à afficher.
Vous ne devez pas utiliser le tri front-end pour trier cette logique. Sinon, quelle est la signification du tri back-end et comment s'assurer que la logique est cohérente avec le back-end. , ce sera au mieux un effort inutile, mais si la cohérence ne peut être garantie, c'est un gros accident.
Solution : Fournir aux utilisateurs un élément de configuration pour décider s'ils doivent trier par premier plan ou par serveur. Modifier ce qui suit
La zone de code d'origine qui doit être modifiée
Le code de la zone correspondante après modification :
La table testée est dans La configuration de sortType a été ajoutée lors du rendu
Enfin, le suivi du tri
L'effet final
Le code de test complet contient également les éléments suivants. L'adresse de modification correspondante de table.js : https://pan.baidu.com/s/1OjwwVmjy02wRQ0rT1euLlQ
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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Étapes de configuration du saut de la page de connexion Layui : Ajouter un code de saut : ajoutez un jugement dans l'événement de clic sur le bouton de soumission du formulaire de connexion et accédez à la page spécifiée via window.location.href après une connexion réussie. Modifiez la configuration du formulaire : ajoutez un champ de saisie masqué à l'élément de formulaire de lay-filter="login", avec le nom "redirect" et la valeur étant l'adresse de la page cible.

layui fournit diverses méthodes pour obtenir des données de formulaire, notamment l'obtention directe de toutes les données de champ du formulaire, l'obtention de la valeur d'un seul élément de formulaire, l'utilisation de la méthode formAPI.getVal() pour obtenir la valeur de champ spécifiée, la sérialisation des données de formulaire et en l'utilisant comme paramètre de requête AJAX et en écoutant l'événement de soumission de formulaire, vous obtenez des données.

Une mise en page adaptative peut être obtenue en utilisant la fonction de mise en page réactive du framework layui. Les étapes comprennent : le référencement du framework layui. Définissez un conteneur de mise en page adaptatif et définissez la classe layui-container. Utilisez des points d'arrêt réactifs (xs/sm/md/lg) pour masquer des éléments sous des points d'arrêt spécifiques. Spécifiez la largeur de l'élément à l'aide du système de grille (layui-col-). Créez un espacement via le décalage (layui-offset-). Utilisez des utilitaires réactifs (layui-invisible/show/block/inline) pour contrôler la visibilité des éléments et leur apparence.

La méthode d'utilisation de layui pour transmettre des données est la suivante : Utilisez Ajax : créez l'objet de requête, définissez les paramètres de la requête (URL, méthode, données) et traitez la réponse. Utilisez des méthodes intégrées : simplifiez le transfert de données à l'aide de méthodes intégrées telles que $.post, $.get, $.postJSON ou $.getJSON.

La différence entre layui et Vue se reflète principalement dans les fonctions et les préoccupations. Layui se concentre sur le développement rapide d'éléments d'interface utilisateur et fournit des composants préfabriqués pour simplifier la construction de pages ; Vue est un framework full-stack qui se concentre sur la liaison de données, le développement de composants et la gestion d'état, et est plus adapté à la création d'applications complexes. Layui est facile à apprendre et convient pour créer rapidement des pages ; Vue a une courbe d'apprentissage abrupte mais permet de créer des applications évolutives et faciles à entretenir. En fonction des besoins du projet et du niveau de compétence du développeur, le cadre approprié peut être sélectionné.

Pour exécuter layui, effectuez les étapes suivantes : 1. Importez le script layui ; 2. Initialisez layui ; 3. Utilisez les composants layui ; 4. Importez les styles layui (facultatif) ; Avec ces étapes, vous pouvez créer des applications Web en utilisant la puissance de layui.

layui est un framework d'interface utilisateur frontal qui fournit une multitude de composants, d'outils et de fonctions d'interface utilisateur pour aider les développeurs à créer rapidement des applications Web modernes, réactives et interactives. Ses fonctionnalités incluent : une conception modulaire flexible et légère, des composants riches, des outils puissants et simples. personnalisation. Il est largement utilisé dans le développement de diverses applications Web, notamment des systèmes de gestion, des plateformes de commerce électronique, des systèmes de gestion de contenu, des réseaux sociaux et des applications mobiles.

layui et vue sont des frameworks frontaux. layui est une bibliothèque légère qui fournit des composants et des outils d'interface utilisateur ; vue est un framework complet qui fournit des composants d'interface utilisateur, la gestion de l'état, la liaison de données, le routage et d'autres fonctions. Layui est basé sur une architecture modulaire et Vue est basée sur une architecture à composants. layui a un écosystème plus petit, vue a un écosystème vaste et actif. La courbe d'apprentissage de layui est faible et la courbe d'apprentissage de vue est raide. layui convient aux petits projets et au développement rapide de composants d'interface utilisateur, tandis que vue convient aux grands projets et scénarios nécessitant des fonctions riches.
