html problème colspan lors de la dissimulation des colonnes

Question

J'ai une table tablesorter qui a deux 2 ensembles d'en-têtes, les en-têtes principaux qui auront chacun 5 sous-titres. L'objectif est de montrer seulement 3 colonnes et permettre correctement à l'utilisateur de trier en fonction des en-têtes principaux. En dehors de ces cinq sous-titres, les colonnes 4 et 5 seront toujours visibles, mais pour les 3 premières colonnes, je veux seulement en montrer une que l'utilisateur sélectionne, et cacher les deux autres. Ulitmately tête en-tête majeur ne montrera que 3 colonnes.

Lorsque l'utilisateur sélectionne les données à afficher, des problèmes se posent avec les en-têtes de colonne.

Si je mets les grands en-têtes à colspan 5 puis colonnes du prochain trop-plein dans le premier jeu, étant donné une apparence incorrecte

Quand je mets les grands en-têtes ColSpan à 3, il semble visiblement parfait, mais quand J'essaie de trier en fonction des en-têtes principaux, les sous-titres ne correspondent pas à leurs en-têtes principaux et le tri est désactivé.

ici est un violon http://fiddle.jshell.net/hed56hsd/1/

Qu'est-ce que je manque? et Ce qui serait une solution de contournement valide

Answer 1

Étant donné que seulement trois colonnes de chaque ensemble seront visibles, la solution la plus simple serait de définir le colspan sur l'en-tête principal à 3. C'est tout.

<th colspan='3' class="set1">Set 1</th> 
<th colspan='3' class="set2">Set 2</th> 
<th colspan='3' class="set3">Set 3</th> 

Lors de l'initialisation, vous pouvez appliquer le sélecteur de données en ajoutant .change() à la fin de l'écouteur d'événement - demo.

$('table').tablesorter({ 
    theme: 'blue' 
}); 

$(".selector").on("change", function() { 
    var selectedData = this.value; 
    $(".type1").addClass("hide"); 
    $('.' + selectedData).removeClass("hide"); 
}).change(); 

Si elle était plus compliquée que je vous aurais recommandé d'essayer le columnSelector widget qui modifie automatiquement le colspan de conserver le format de table de chambouler.