Comment supprimer l'affichage des valeurs répétitives dans les tables html qui peuvent être triées?

Question

J'ai une table en HTML que je génère à partir de XML/XSL et je veux qu'elle supprime les valeurs répétées. Cependant, je veux aussi le trier à la volée en cliquant sur les titres.

Sans aller-retour au serveur, j'ai besoin de supprimer différentes valeurs après chaque tri. Y a-t-il une bonne solution javascript/css?

Par exemple

données

Date Person Score 
May Jeff 1 
May Joel 2 
June Alex 1 

Affichage initial
manque Note du deuxième mai

Date Person Score 
May Jeff 1 
     Joel 2 
June Alex 1 

Affichage Après le tri par score
manque Note de seconde 1

Date Person Score 
May Joel 2 
June Alex 1 
May Jeff  

Answer 1

Personnellement, je voudrais utiliser quelque chose comme jQuery Table Sorter. Vous pouvez également utiliser la fonction unique() pour supprimer les doublons. Utiliser jQuery rend les choses beaucoup plus faciles qu'avec JS. Soit cela ou je voudrais utiliser JSF pour ma couche de présentation, qui vient déjà avec des fonctionnalités pour de telles occasions.

Je ne connais pas vraiment une "bonne" façon de le faire avec JS. Chaque implémentation dans JS que j'ai jamais vue est désordonnée. L'ajout de jQuery à votre projet vous évitera d'avoir à écrire du code JS méchant.

Answer 2

Avoir une boucle de fonction javascript à travers les colonnes de table pertinentes et supprimer les valeurs que lorsque les mêmes que celles d'avant. Vous pouvez également ajouter un attribut rowspan à la première cellule avec cette valeur afin que la sémantique de la table soit correcte.

Ce n'est pas vraiment un travail pour CSS car il traite l'information et pas seulement afficher des choses (en plus ce serait vraiment difficile).

Answer 3

Je recommande de définir une classe sur les td avec des valeurs répétées pour les cacher, de sorte que vous ne perdiez pas les données. Vous pouvez parcourir chaque cellule de la colonne, en la comparant à la dernière, et si c'est la même chose, ajoutez la classe "duplicate" à la cellule.

function after_sort(sort_column) { 
    clear_duplicate_classes(); 

    var last = null; 
    for (var i = 0; i < trs.length; i++) { 
     var td = get_nth_td(trs[i], sort_column); 
     if (td.innerHTML === last) { 
      add_duplicate_class(td); 
     } 
     else { 
      last = td.innerHTML; 
     } 
    } 
} 

Si vous utilisez une bibliothèque comme jQuery, il ressemblerait à ceci:

function after_sort(table, sort_column) { 
    $(table).find(".duplicate").removeClass("duplicate"); 

    var last = null; 
    $(table).find("tr").each(function() { 
     var td = $(this).find("td").get(sort_column); // doesn't account for colspan 
     if (td.innerHTML === last) { 
      $(td).addClass("duplicate"); 
     } 
     else { 
      last = td.innerHTML; 
     } 
    }); 
} 

Ce sont tout à fait non testé, donc je peut-être manqué quelque chose. À utiliser à vos risques et périls, etc.

Answer 4

Découvrez mon plugin tablesorter: jquery.tablesorter.deduper.js. Il ne supprime pas la valeur elle-même, mais ajoute la classe CSS aux valeurs dupliquées, donc le résultat est similaire (vous pouvez le masquer).

Here is an example