En travaillant sur une grande liste de données tabulaires qui nécessite un système de tri/filtrage facile, j'ai découvert la bibliothèque Isotope, qui semble faire exactement ce que je veux, et fournit beaucoup de visuels et de fonctionnalités agréables. J'aimerais pouvoir trier et filtrer les lignes d'un tableau à l'aide d'Isotope, et j'ai créé une démo de base qui semble fonctionner. Cependant, quelques bogues sont présents :
- J'utilise la section <thead> pour les filtres et les en-têtes de ligne, et j'applique donc le sélecteur Isotope à la section <tbody>. Cependant, lorsque Isotope est initialisé avec le tbody comme conteneur, les cellules du tableau de chaque ligne perdent la largeur attribuée par le formatage du tableau. Ce n'est pas un gros problème, car je peux définir manuellement la largeur des colonnes si nécessaire, mais c'est plutôt gênant dans le contexte actuel.
- Les lignes sont placées à l'extérieur du tableau, dans le coin supérieur gauche de l'élément conteneur du tableau. Le positionnement relatif de l'élément tbody ne semble pas affecter les règles de style de la position absolue des rangées (appliquées automatiquement par Isotope) comme ce serait le cas avec un div normal. Normalement, le positionnement absolu devrait être relatif à son élément conteneur si ce dernier est positionné en utilisant un positionnement absolu ou relatif, mais cela ne semble pas être le cas ici.
Les lignes du tableau sont filtrées correctement, et la bibliothèque Isotope applique correctement les animations et le style avec ces exceptions. Dans la mesure du possible, j'aimerais conserver l'utilisation des tableaux, car les personnes chargées de la maintenance de cette page le feront par l'intermédiaire d'un CMS et ne connaissent pas suffisamment le HTML ou l'éditeur WYSIWYG utilisé par le CMS pour produire de manière cohérente des structures HTML autres qu'un tableau assez basique. Quelqu'un a-t-il des conseils pour résoudre ces deux problèmes ? Merci !
Editar: En complément, j'ai résolu les problèmes initiaux que je rencontrais. Il s'avère que l'élément tbody n'accepte pas l'attribut position : relative ou position : absolute, donc les lignes du tableau n'étaient pas placées correctement. Le fait de définir l'ensemble du tableau en position : relative a permis de résoudre le principal problème de placement, bien que les lignes aient été déplacées en haut et à gauche du tableau. J'ai résolu ce problème en décalant l'attribut table row top de la hauteur de l'élément thead en Javascript, puisque sans Javascript l'affichage est normal.
Cela fonctionne parfaitement dans Firefox, Chrome, Opera et Safari. Cependant, IE 7, 8 et 9 ont tous des problèmes de rendu - et pire, ce sont tous des problèmes de rendu différents. IE9 refuse de placer les cellules du tableau avec le décalage correct, IE8 n'affiche pas du tout les lignes, et IE7 semble interpréter toute la situation comme signifiant "EXPLODE !". Au moins, le principal problème que j'ai rencontré a été résolu !
