Share
Lorsqu'une page Web est conçue pour afficher des tableaux de données volumineux, il convient de veiller à permettre à l'utilisateur de trier les données de manière structurée. Dans cet article, je vais passer en revue quatre techniques: les effets de survol, les lignes de zébrures, le filtrage et le tri..
Il y a quelques notes importantes que nous devons aborder avant de regarder notre code Javascript. Le balisage de table HTML ressemblera à n’importe quelle autre table que vous avez créée, à l’exception de
nécessite deux balises que beaucoup de gens omettent. La section de tête de la table doit être enveloppée dans . Le corps du
table, où toutes les données que nous voulons afficher est conservée, doit être enveloppée dans
| Prénom | Nom de famille | Ville | Etat |
|---|---|---|---|
| Mannix | Boulonner |
Les Zebra Rows sont une technique d'organisation des données très courante, facile à mettre en œuvre et à fort impact. Zebra Rows in
Essentiellement, le style des lignes impaires et paires est alterné pour faciliter la lecture horizontale des données. Ceci est très important avec
données multi-colonnes afin que les utilisateurs puissent consulter une colonne et lire facilement les données associées sur la même ligne sous d'autres en-têtes. dans le
exemples que je vais utiliser tout au long de ce tutoriel, j’ai une liste de personnes avec quatre propriétés: prénom, nom, ville et
Etat. Remarquez comment j’ai alterné les couleurs des lignes et la couleur de la police pour maximiser l’effet.
Passons maintenant aux rangées de zèbres. Le premier endroit à commencer est un fichier CSS externe lié au document. Le premier élément à
la cible est la table.
table couleur de fond: blanc; largeur: 100%;
C'est assez trivial. nous disons que le fond de la table est blanc et qu'il s'étend à 100% de la largeur de l'élément parent. Ensuite, nous allons cibler
les éléments de la cellule
tbody td couleur de fond: blanc; tbody td.odd background-color: # 666; Couleur blanche;
Ici, nous configurons une classe pour les lignes de tableau "impaires" qui définit une couleur de fond et une couleur de police différentes. Nous définissons également un style par défaut pour tous les td
éléments qui s'appliqueront de manière inhérente aux lignes "paires". C'est tout le CSS qui est requis. Je t'ai dit que c'etait simple! Regardons maintenant le code jQuery. le
La puissance des sélecteurs jQuery rend cela aussi simple que le code CSS. Il suffit de cibler les cellules et d'utiliser la fonction addClassName..
Accentsconagua
$ (document) .ready (function () zebraRows ('tbody tr: odd td', 'impair');); // utilisé pour appliquer des styles de lignes alternés function zebraRows (selector, className) $ (selector) .removeClass (className) .addClass (className); Ce code, bien que court, a quelques pièges à prendre en compte. Tout d’abord, remarquez comment nous avons résumé l’implémentation à une fonction; c'est idéal parce que si nous changeons la
les données de la table de manière asynchrone, sans régénération de page, nous voudrons alors nous assurer que les lignes sont toujours en alternance. Pour la même raison, nous invoquons également le
La fonction removeClass fait en sorte que si une ligne est initialement impaire, mais devient paire, nous sommes assurés que la définition de la classe impaire ne reste pas. Cela peut sembler déroutant en ce moment,
mais lorsque nous examinerons le filtrage plus tard, cela deviendra plus clair. Par souci de code réutilisable, nous exigeons également que le sélecteur et le nom de la classe soient passés à
la fonction - elle peut donc être utilisée dans des projets ayant des noms de classe ou des critères de sélecteur différents (c.-à-d. un site contenant plusieurs tables uniquement).
que vous souhaitez cibler). Si vous examinez la fonction ready (), une fonction jQuery exécutée lorsque la page est
Le chargement terminé, vous verrez notre appel à zebraRows (). Voici où nous passons dans le sélecteur et le nom de la classe. Le sélecteur utilise une syntaxe spéciale de jQuery
: impair, qui trouvera toutes les lignes impaires. Ensuite, nous recherchons tous les éléments enfants de la ligne qui sont des cellules. Ce code
est assez simple pour ceux qui ont déjà utilisé jQuery, mais la simplicité devrait rendre le code assez lisible par quiconque.
Remarque: L'utilisation de jQuery pour appliquer des couleurs de lignes alternées est une solution simple, elle n'est pas dégradable si un utilisateur a désactivé JavaScript. je voudrais
Nous vous recommandons d’appliquer la classe impaire sur le serveur en code PHP ou en HTML statique, bien que cela dépasse le cadre de cet article..
Un effet vraiment intéressant pour les utilisateurs est de mettre en évidence la ligne sur laquelle ils volent actuellement. C’est un excellent moyen de sélectionner des données spécifiques qui pourraient les intéresser.
C'est simple à mettre en oeuvre avec jQuery, mais d'abord un peu de CSS.
… Td.hovered background-color: bleu clair; couleur: # 666; …
C’est tout le CSS dont nous avons besoin. Lorsque nous survolons une ligne, nous souhaitons que toutes les cellules de cette rangée aient un arrière-plan bleu clair et une couleur de police grise. le
jQuery pour y arriver est aussi simple.
… $ ('Tbody tr'). Hover (fonction () $ (this) .find ('td'). AddClass ('hovered');, function () $ (this) .find ('td' ) .removeClass ('survolé'););… Nous utilisons la fonction hover () dans la bibliothèque jQuery. Il faut deux arguments qui sont
fonctions que nous voulons exécuter lorsque la souris survole et lorsque la souris quitte l'élément, respectivement. Quand ils survolent une rangée, nous voulons trouver tous
les cellules dans la ligne et ajoutez-leur la classe survolée. Lorsque la souris quitte l'élément, nous souhaitons supprimer cette classe. C'est tout ce que nous devons faire pour
obtenir l'effet de vol stationnaire, allez l'essayer!
Maintenant la substance charnue - manipulant réellement les données montrées. Si un site Web demande que de nombreux enregistrements de données soient affichés, dans mon exemple 1000 lignes,
est plus qu'approprié d'offrir à l'utilisateur un moyen de passer au crible les données. Un moyen particulièrement efficace apparu sur le Web ces dernières années dans le cadre de
le mouvement Web2.0 / AJAX est en train de filtrer. C'est également quelque chose qu'Apple insiste beaucoup dans ses applications telles que iTunes. Le but pour nous est de permettre à l'utilisateur
pour saisir une requête de recherche dans une entrée de texte standard et filtrer en direct les lignes du tableau ci-dessous, en affichant uniquement celles contenant le texte correspondant. C'est sans doute plus
puis les styles de lignes alternés, mais dans la réalité, il nécessite un minimum de code, en raison de la fonctionnalité intégrée de jQuery.
Nous allons d’abord écrire une fonction générique qui utilise un sélecteur et une chaîne de texte. Cette fonction recherchera ensuite tous les éléments correspondant à ce sélecteur à la recherche de
la ficelle. S'il trouve la chaîne, il affichera l'élément et appliquera un nom de classe visible à l'élément, sinon il cachera l'élément. Pourquoi postulons-nous?
la classe de visible? Une fois les éléments triés, nous voudrons exécuter la fonction zebraRows à nouveau, mais nous devons dire à jQuery d’ignorer les lignes cachées, et
la meilleure façon que j'ai trouvée de faire est d'appliquer une classe de visible.
La recherche proprement dite est effectuée par la fonction JavaScript, nommée judicieusement, search (). Bien que dû au fonctionnement du DOM, si nous n’utilisons pas la fonction jQuery,
text (), la boîte examinera également toutes les balises HTML présentes dans la ligne du tableau, telles que
// filtre les résultats en fonction de la fonction de requête filter (sélecteur, requête) query = $ .trim (query); // coupe l'espace blanc query = query.replace (/ / gi, '|'); // ajoute OR pour la requête regex $ (sélecteur) .each (function () ($ (this) .text (). search (new RegExp (query, "i")) < 0) ? $(this).hide().removeClass('visible') : $(this).show().addClass('visible'); ); La sixième ligne est l'endroit où la magie se produit, et nécessite probablement un peu d'explication. À partir de la ligne 5, nous disons au code de parcourir tous les éléments
qui correspondent au sélecteur, c’est-à-dire aux lignes, puis nous voulons exécuter le code sur la ligne 6 en utilisant chacune d’elles. Line 6 est un peu compliqué si vous débutez en programmation,
mais il est assez facile à comprendre si on le scinde. Pensez à tout ce qui précède le point d’interrogation en tant que question, si la réponse à cette question est vraie, alors
Exécutez le code à gauche des deux points, mais après le point d'interrogation. Si la réponse est fausse, exécutez le code après les deux points. Ceci est essentiellement un si
déclaration, mais sous une forme plus concise appelée opérateur ternaire, ne serait pas différent de l'écriture:
… If ($ (this) .text (). Search (new RegExp (requête, "i")) < 0) $(this).hide().removeClass('visible') else $(this).show().addClass('visible'); … La raison pour laquelle nous demandons si search () renvoie "inférieur à zéro, nous testons cette condition. En théorie, il n’ya rien de mal à vérifier si elle renvoie (==) -1, mais dans la pratique, il est plus sûr de s’assurer
moins que zéro.
Maintenant que nous avons une fonction de filtrage complète, utilisons les événements jQuery pour la relier à l’entrée. Pour obtenir l'effet live, nous désirons l'événement que nous voulons
surveillez lorsque l'utilisateur relâche une clé alors qu'il est concentré sur la zone de texte, appelée keyup en JavaScript. Il est important que nous définissions l'attribut ID du
entrée afin que nous puissions le cibler en utilisant jQuery. De retour dans notre fonction ready, nous devons ajouter du code après notre appel à zebraRows ().
Et le code jQuery:
… // la valeur par défaut de chaque ligne est visible $ ('tbody tr'). AddClass ('visible'); $ ('# filtre'). keyup (fonction (événement) // si vous appuyez sur échap ou rien n’est entré dans (event.keyCode == 27 || $ (this) .val () == ") // si vous appuyez sur echap, nous voulons effacer la valeur de la zone de recherche $ (this) .val ("); // nous voulons que chaque ligne soit visible, car si rien // n’est entré, toutes les lignes sont mises en correspondance. $ ('tbody tr ') .removeClass (' visible '). show (). addClass (' visible '); // s'il y a du texte, permet de filtrer else filter (' tbody tr ', $ (this) .val ()); // réappliquez des lignes de zèbres $ ('. visible td'). removeClass ('impair'); zebraRows ('. visible: impair td', 'impair');… Ce code est de loin le plus complexe que nous ayons vu jusqu'à présent, nous allons donc le parcourir ligne par ligne.
Remarque: Une bonne note pourrait être d’utiliser CSS pour masquer la boîte de filtre et juste au-dessus de l’appel keyup pour l’afficher, afin que les utilisateurs avec JavaScript désactivé ne le soient pas.
confus quand ils tentent de trier les données, cela ressemble à:
… #Filter display: none; …
application.js
… $ ('# Filtre'). Show ();… Wow, c'était beaucoup de code, n'hésitez pas à prendre une pause thé / café avant de passer au tri…
Bon tout est prêt? Bon, laisse aller!
En dernier lieu, nous allons permettre de trier le tableau en fonction des en-têtes de colonne. Ceci est une pratique très standard que les utilisateurs anticipent connue sous le nom de cliquer pour trier.
Lorsque l'utilisateur clique sur l'un des en-têtes, nous souhaitons trier le tableau par ordre croissant. S'ils cliquent à nouveau, nous souhaitons trier par ordre décroissant pour cette colonne. Ce code est tout à fait
avancé et pas pour les faibles au cœur. Le concept initial est venu de
Apprendre jQuery 1.3. je
Je l'ai réorganisé pour mieux répondre à nos besoins de simplicité. Toutefois, si vous souhaitez un contrôle plus fin du grain, je vous renvoie au chapitre 7 du livre où
les tables et jQuery sont discutés en détail.
Avant de plonger vraiment dans le code actuel, il est important que nous discutions du concept de la façon dont nous prévoyons de traiter ce problème. Nous utiliserons le code interne de JavaScript
La méthode sort () conçue pour prendre un tableau et le trier
en utilisant une fonction personnalisée fournie par le code. Dans notre cas, nous souhaitons simplement trier alphabétiquement et numériquement, nous allons donc comparer les deux éléments fournis.
et renvoyer l'ordre dans lequel les deux doivent entrer en fonction de cette conception. Parce que nous voulons trier par ordre croissant et décroissant, nous allons utiliser une déclaration de classe CSS pour voir
quel est l'état actuel du tri selon cette colonne et inversez-le si nécessaire. Une fois que nous avons notre tableau en ordre, nous allons utiliser l'ordre pour réinsérer les lignes
dans la table, un par un. Cela semble beaucoup, mais à cause de la rapidité fulgurante de JavaScript, il sera très transparent pour l'utilisateur. Tous
cela sera lié à l'événement click des en-têtes de colonne du tableau.
Comme d'habitude, retirons le code CSS, car c'est le plus simple..
th.sortable color: # 666; curseur: pointeur; texte-décoration: souligné; th.sortable: hover color: black; th.sorted-asc, th.sorted-desc couleur: noir;
Tous nos en-têtes de tri auront une classe, et le modificateur de survol en CSS le fait émuler un hyperlien pour les utilisateurs. Nous profitons aussi de
la classe CSS que nous avons mentionnée sur sort-asc et sort-triée afin que nous puissions montrer à l'utilisateur la colonne en cours de tri du tableau. Je ne l'ai pas inclus mais
ce serait un bon endroit pour placer des images d'arrière-plan de flèches pointant vers le haut et le bas afin de donner une indication visuelle supplémentaire à l'utilisateur. Passons maintenant au code JavaScript et à la
la complexité du tri, heureusement rendue plus facile avec jQuery. Le code ci-dessous appartient à la fonction ready () que nous avons commencée il y a bien longtemps. Placer ce droit
au-dessus de la fin de la fonction est préférable.
// récupère toutes les lignes d'en-tête $ ('thead th'). each (function (colonne) $ (this) .addClass ('sortable'). click (function () var findSortKey = function ($ cell) return $ cell.find ('. sort-key'). text (). toUpperCase () + "+ $ cell.text (). toUpperCase ();; var sortDirection = $ (this) .is ('. sorted-asc ')? -1: 1; // remonter dans l’arbre et récupérer les lignes avec les données // pour trier var $ rows = $ (this) .parent (). Parent (). Parent (). Find (' tbody tr '). get (); // parcourt toutes les lignes et trouve $ .each ($ rows, fonction (index, row) row.sortKey = findSortKey ($ (row) .children (' td '). eq (column));); // compare et trie les lignes par ordre alphabétique $ rows.sort (fonction (a, b) if (a.sortKey < b.sortKey) return -sortDirection; if (a.sortKey > b.sortKey) return sortDirection; retourne 0; ); // ajoute les lignes dans le bon ordre au bas de la table $ .each ($ rows, fonction (index, row) $ ('tbody'). append (row); row.sortKey = null;); // identifie l'ordre de tri de la colonne $ ('th'). removeClass ('trié-asc trié-desc'); var $ sortHead = $ ('th'). filtre (': nth-child (' + (colonne + 1) + ')'); sortDirection == 1? $ sortHead.addClass ('sort-asc' '): $ sortHead.addClass (' sort-desc '); // identifie la colonne à trier par $ ('td'). removeClass ('rangé') .filter (': nth-child (' + (colonne + 1) + ')') .addClass ('rangé') ; $ ('. visible td'). removeClass ('impair'); zebraRows ('. visible: pair td', 'impair'); ); ); Woo, c'est beaucoup de code. Décomposons cela en morceaux importants. La première partie du code récupère tous les en-têtes et les parcourt en boucle. La première chose
il ajoute une classe de sortable, et commence à lier le clic.
… // récupère toutes les lignes d'en-tête $ ('thead th'). Each (function (colonne) $ (this) .addClass ('sortable'). Click (function () … Notez que cela peut facilement être modifié pour ne permettre que le tri de certaines colonnes en supprimant l'appel addClass () et en modifiant le sélecteur de 'thead th' à
quelque chose comme 'thead th.sortable'. Bien sûr, cela nécessite que vous spécifiiez manuellement laquelle de vos colonnes sont triables en ajoutant à la
en-têtes appropriés dans le code HTML.
Le prochain bit de code est une déclaration de fonction liée à une variable. Cela peut sembler un peu bizarre à ceux qui ne connaissent pas la programmation, mais c'est une pratique courante. Ce
nous permet de référencer facilement la fonction spécifiquement dans le contexte de l'en-tête sur lequel nous travaillons. Cette explication est probablement un peu déroutante, mais le
type de raisonnement précis dépasse la portée de cet article. Le point de la fonction findSortKey est de déterminer la colonne à trier, nous pouvons le faire.
parce que nous savons que l'élément sur lequel ils ont cliqué est le même index dans la table pour toutes les colonnes que nous allons comparer. Par exemple, s’ils cliquent sur le troisième en-tête, nous
vouloir regarder la troisième colonne de chaque ligne pour comparer l'ordre dans lequel placer les lignes. Après avoir déclaré cette fonction, nous déterminons l’ordre de tri croissant
ou décroissant. Ceci est fait en recherchant le nom de classe de 'sort-asc' dans l'en-tête du tableau s'il est présent, nous savons qu'il est actuellement trié par ordre croissant et
nous devons faire décroissant, sinon utilisez la valeur par défaut croissant. Cela prend en charge le cas où il est en descente et nous devons le faire remonter.
Ce bit de code renvoie 1 ou -1, nous expliquerons pourquoi plus tard.
… Var findSortKey = fonction ($ cell) return $ cell.find ('. Clé-de-tri'). Text (). ToUpperCase () + "+ $ cell.text (). ToUpperCase ();; var sortDirection = $ (this) .is ('. sorted-asc')? -1: 1;… Maintenant, nous voulons obtenir cette colonne spécifique de chaque ligne et la placer dans un tableau. Pour cela, utilisez la méthode jQuery de
get () qui prend les lignes et les met dans un tableau que la fonction sort () peut comprendre. Parce que le courant
sélecteur était le tête de la table, nous devons remonter de 3 places dans l’arborescence du DOM pour trouver table> tbody> tr> td. Cela semble un peu complexe, mais en réalité, c'est simple. Après
que nous parcourions chacune des lignes que nous venons de trouver et trouvions la colonne que nous souhaitons utiliser dans le tri. Ceci est fait en vérifiant si son index (le nombre de places
commençant à 0 à partir de la première colonne du tableau) est égal à l'index de l'en-tête cliqué. Ceci est ensuite passé dans la fonction findSortKey afin que nous puissions
puis définissez un attribut personnalisé appelé sortKey qui contient l'en-tête de colonne que nous trions et le texte de la colonne actuelle que nous examinons, qui sont tous les deux
mis en majuscule pour que le tri respecte la casse. C’est un moyen de rationaliser le tri afin de le rendre plus réactif pour de grandes quantités de données..
… // pour trier var $ rows = $ (this) .parent (). Parent (). Parent (). Find ('tbody tr'). Get (); // parcourt toutes les lignes et trouve $ .each ($ rows, fonction (index, row) row.sortKey = findSortKey ($ (row) .children ('td'). eq (column));); … Vient ensuite la fonction sort () à laquelle je me suis attardée. Ceci est appelé sur le tableau de lignes que nous avons créé avec get (). Le seul paramètre que nous passons est le
fonction nous voulons déterminer le tri. Cette fonction reçoit deux attributs à comparer et renvoie 1 si le premier est supérieur, -1 si le second est excellent et 0
s'ils sont égaux. C’est ici que la variable sortDirection entre en jeu car son fonctionnement consiste à lui attribuer la valeur 1 ou -1, puis à multiplier le
1 ou -1, la fonction doit retourner par la méthode sortDirection, ce qui permet d’atteindre l’effet ascendant / descendant souhaité.
… // compare et trie les lignes par ordre alphabétique $ rows.sort (fonction (a, b) if (a.sortKey < b.sortKey) return -sortDirection; if (a.sortKey > b.sortKey) return sortDirection; retourne 0; );…
Le bit de code suivant ajoute simplement chaque ligne du tableau désormais trié dans la structure DOM. Ceci est fait avec la fonction append, ce qui est bien, car
ne copie pas la ligne et ne la place pas à la fin, mais la supprime réellement de l'emplacement actuel dans le DOM et des endroits où nous le disons, dans ce cas, à la fin du
table. Une fois cette opération effectuée pour chaque élément du tableau, chaque ligne aura été déplacée vers son nouvel emplacement. Aussi pour faire un peu de nettoyage, nous supprimons le sortKey
attribut que nous avons défini plus tôt.
… // ajoute les lignes dans le bon ordre au bas de la table $ .each ($ rows, fonction (index, row) $ ('tbody'). Append (row); row.sortKey = null;) ;… Nous entrons maintenant dans la phase de nettoyage de notre fonction car tout le travail de levage a été fait. Ensuite, nous prenons toutes les cellules du corps de la table, retirons toutes les
attacher des attributs triés dans les déclarations de classe, puis filtrer toutes les colonnes sauf les colonnes qui sont le même index que notre en-tête trié et appliquer le "trié"
classe à eux. C'est bien pour le ciblage CSS si, par exemple, nous voulions que la colonne triée soit d'une couleur différente, nous pourrions déclarer ce CSS:
… Triés background-color: green; …
La dernière chose que nous faisons est de supprimer toutes les déclarations CSS "impaires" et de réappliquer les rangées de zèbres comme nous l'avons fait dans la partie filtre..
… $ ('. Visible td'). RemoveClass ('impair'); zebraRows ('. visible: pair td', 'impair');… C'est comme cela que nous faisons un tri très simple. Il est important de noter que cela ne fera que trier les éléments par ordre alphabétique ou numérique et ne fonctionnera pas avec les dates ou les devises.
par exemple. Cela nécessite une gestion plus spécialisée allant au-delà de nos objectifs de simple manipulation de table..
Dans cet article, nous avons appris à utiliser notre propre code de manipulation de table à l'aide de jQuery. C'est
très pratique pour l'utilisateur et pour nous. L’utilisateur obtient les contrôles attendus pour le tri et le filtrage des données et nous avons un code à la fois petit et facile à utiliser.
comprendre. Parce que nous avons écrit cela nous-mêmes, nous pouvons maintenant l'étendre à notre manière. Notre méthode est idéale pour une manipulation simple, mais si vous avez besoin d’un évier de cuisine, je vous recommande de jeter un coup d’œil à la
Plugin de tables de données pour jQuery. J'aimerais beaucoup répondre aux questions dans les commentaires ou sur Twitter
(@noahendrix). Merci d'avoir lu!
