Faire fonctionner jQuery tablesorter avec des lignes de table masquées / groupées

Question

J'ai la table classique avec des enregistrements extensibles et réductibles qui, si développée, montre plusieurs sous-enregistrements (en tant que nouveaux enregistrements dans la même table parent, pas une table enfant div / enfant). Je me sers aussi de tablesorter et je l’adore.

Le problème est que tablesorter ne conserve pas les enregistrements enfants développés à côté des enregistrements parents. Il les trie comme s'ils étaient au plus haut niveau. Ainsi, chaque fois que la table est triée par colonne, les lignes enfants se retrouvent partout et pas où je les veux.

Est-ce que quelqu'un connaît une bonne extension au tablesorter ou une configuration spécifique qui permet à tablesorter de garder les rangées enfants regroupées avec la rangée parent même après le tri? Ou dois-je abandonner tablesorter en faveur d'une autre API ou démarrer le processus hideux d'écriture de mon propre widget? Devrais-je éviter l'approche basée sur les CSS consistant à masquer des lignes individuelles du tableau pour représenter les lignes réduites?

Answer 1

Si vous souhaitez conserver tablesorter, il existe un mod que j'ai utilisé à cette fin disponible ici

Après l’avoir inclus, vous indiquez la classe "expand-child" dans la deuxième ligne (enfant extensible), et tablesorter saura conserver la ligne associée à son parent (la ligne précédente).

Answer 2

En fait, le mod de tablesorter mentionné par @AdamBellaire a été ajouté. tablesorter v2.0.5 . J'ai documenté comment utiliser le ccsChildRow option sur mon blog.

De plus, si vous êtes intéressé, j'ai un fork de tablesorter sur github , qui comporte de nombreuses améliorations et des widgets utiles:)

Answer 3

Un correctif laid au lieu d'utiliser ce qui précède implique de spécifier les classes parentId css et childId css pour les lignes parent et enfant, puis d'utiliser un widget pour effectuer un nouveau réglage. Juste au cas où quelqu'un d'autre rencontrerait ce problème. Ce n'est clairement pas le meilleur code du tout, mais cela fonctionne pour moi!

$("tbody tr[class^='parent']", table).each(function() {
 $(this).after($("tbody tr[class^='child"+$(this).attr("class").substring(6)+"']", table));
});

Answer 4

J'ai pu surmonter ce problème en attribuant des attributs enfant rel aux enfants et des attributs parent aux parents. Ensuite, je parcoure la table au début, cache tous les enfants et les rajoute une fois le tri terminé. J'utilise également une fonction de basculement pour afficher les enfants. Voici ma solution:

function lfDisplayProductInformation(id){

    if($(`[rel="child-${id}"]`).attr("hidden") === 'hidden'){
        $(`[rel="child-${id}"]`).removeAttr('hidden')
    }
    else if(!$(`[rel="child-${id}`).attr("hidden")){
        $(`[rel="child-${id}"]`).attr("hidden", true)
    }

}

$(".tablesort")
.tablesorter({
  theme: 'blue',
  showProcessing : true
})

// assign the sortStart event
.bind("sortStart",function(e, t) {
    $("tr[rel^='parent']").each(function() {
            var parentRow = $(this); 
            var tag = (parentRow.attr('rel')).split("-")[1];
            var childRow = $(`tr[rel="child-${tag}"]`)
            if(!childRow.attr("hidden")){
                childRow.attr("hidden", true)
            }
    });

})

.bind("sortEnd",function(e, t) {
    $("tr[rel^='parent']").each(function() {
            var parentRow = $(this); 
            var tag = (parentRow.attr('rel')).split("-")[1];
            var childRow = $(`tr[rel="child-${tag}"]`)
            childRow
            parentRow.after(childRow);
    });
})