Far funzionare jQuery tablesorter con righe di tabella nascoste / raggruppate

Question

Ho la tabella classica con record espandibili e comprimibili che se espansi mostrano diversi sottoregistrati (come nuovi record nella stessa tabella principale, non alcuni div / tabella figlio). Sto anche usando tableorter e lo adoro assolutamente.

Il problema è che tablesorter non mantiene i record figlio espansi accanto ai record padre. Li ordina come se fossero al massimo livello. Quindi ogni volta che la tabella viene ordinata per colonna, le righe secondarie finiscono dappertutto e non dove le voglio.

Qualcuno conosce una buona estensione a tableorter o configurazione specifica che consente a tableorter di mantenere le righe figlio raggruppate insieme alla riga padre anche dopo l'ordinamento? O devo rinunciare a tableorter a favore di qualche altra API o iniziare il brutto processo di scrittura del mio widget? Devo evitare l'approccio basato su CSS di nascondere singole righe della tabella per rappresentare le righe di compressione?

Answer 1

Se vuoi mantenere tablesorter, esiste una mod che ho usato a questo scopo disponibile qui

Dopo averlo incluso, fai in modo che la tua seconda riga (figlio espandibile) abbia la classe " expand-child " ;, e tablesorter saprà mantenere la riga accoppiata con il suo genitore (riga precedente).

Answer 2

In realtà, è stato aggiunto mod di tableorter menzionato da @AdamBellaire a tablesorter v2.0.5 . Ho documentato come utilizzare ccsChildRow opzione sul mio blog.

Inoltre, se sei interessato, ho un fork di tablesorter su github che ha molti miglioramenti e widget utili :)

Answer 3

Una brutta soluzione invece di utilizzare quanto sopra implica la specifica della classe css parentId e della classe css childId per le righe padre e figlio, e quindi l'uso di un widget per ri-regolare. Nel caso in cui qualcun altro incontri questo problema. Chiaramente non è affatto il miglior codice, ma funziona per me!

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

Answer 4

Sono stato in grado di superare questo problema assegnando gli attributi rel figlio ai figli e gli attributi rel padre ai genitori. Quindi giro attraverso il tavolo all'inizio e nascondo tutti i bambini e li riaccendo al termine dell'ordinamento. Uso anche una funzione di attivazione / disattivazione per visualizzare i bambini. Ecco la mia soluzione:

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);
    });
})