Conseguir que jQuery tablesorter funcione con filas de tabla ocultas / agrupadas

Question

Tengo la tabla clásica con registros expandibles y plegables que si se expanden muestran varios subregistros (como registros nuevos en la misma tabla primaria, no alguna tabla div / secundaria). También estoy usando tablesorter y me encanta.

El problema es que el clasificador de tablas no mantiene registros secundarios expandidos junto a los registros principales. Los clasifica como si fueran de nivel superior. Entonces, cada vez que la tabla se ordena por una columna, las filas secundarias terminan por todas partes y no donde las quiero.

¿Alguien sabe de una buena extensión para el clasificador de tablas o una configuración específica que permita al clasificador de tablas mantener las filas secundarias agrupadas junto con la fila principal incluso después de ordenar? ¿O tengo que renunciar al clasificador de tablas a favor de alguna otra API o iniciar el feo proceso de escribir mi propio widget? ¿Debo evitar el enfoque basado en CSS de ocultar filas individuales de la tabla para representar filas de colapso?

Answer 1

Si desea mantener tablesorter, hay un mod que he utilizado para este propósito disponible aquí

Después de incluirlo, hace que su segunda fila (hijo expandible) tenga la clase " expand-child " ;, y tablesorter sabrá mantener la fila emparejada con su padre (fila anterior).

Answer 2

En realidad, ese mod de tableorter mencionado por @AdamBellaire fue agregado a tablesorter v2.0.5 . He documentado cómo usar el ccsChildRow opción en mi blog.

Además, si está interesado, tengo un fork of tablesorter en github que tiene muchas mejoras y widgets útiles :)

Answer 3

La corrección fea en lugar de usar lo anterior implica especificar la clase css parentId y la clase css childId para las filas padre e hijo, y luego usar un widget para reajustar. En caso de que alguien más se encuentre con este problema. Claramente no es el mejor código, ¡pero funciona para mí!

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

Answer 4

Pude superar esto mediante la asignación de atributos rel para niños a los niños y atributos rel para padres a los padres. Luego recorro la tabla al principio y oculto a todos los niños y los vuelvo a colocar después de que se completa la clasificación. También uso una función de alternar para mostrar a los niños. Aquí está mi solución:

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