jQuery Datatables rowGroup Contraer/Expandir

El paso a paso o código que verás en este artículo es la resolución más fácil y válida que hallamos a esta duda o dilema.

Solución:

Primero agregue un estado para realizar un seguimiento de los grupos colapsados:

 var collapsedGroups = ;

A continuación, agregue esto a la inicialización de Datatable para habilitar el complemento de grupo de filas. Funciona comprobando collapapsedGroups y luego esta información para ocultar o mostrar las filas. También agrega una clase css que indica si está colapsada o no:

 {
    rowGroup: 
        // Uses the 'row group' plugin
        dataSrc: 'product.category',
        startRender: function (rows, group) 
            var collapsed = !!collapsedGroups[group];

            rows.nodes().each(function (r) 
                r.style.display = collapsed ? 'none' : '';
            );    

            // Add category name to the . NOTE: Hardcoded colspan
            return $('')
                .append('' + group + ' (' + rows.count() + ')')
                .attr('data-name', group)
                .toggleClass('collapsed', collapsed);
        
  

Finalmente, agregue un controlador para hacer clic en la fila para contraer/expandir filas. Esto provoca un redibujado de la tabla que, a su vez, llama startRender arriba:

   $tbody.on('click', 'tr.group-start', function () 
        var name = $(this).data('name');
        collapsedGroups[name] = !collapsedGroups[name];
        table.draw();
    );

Aquí hay un ejemplo de trabajo.

También puede agregar un ícono de alternador para indicar el estado de colapso (usando fuente impresionante):

startRender: function (rows, group) 
    var collapsed = !!collapsedGroups[group];

    rows.nodes().each(function (r) 
        r.style.display = collapsed ? 'none' : '';
    );

    var toggleClass = collapsed ? 'fa-plus-square' : 'fa-minus-square';

    // Add group name to 
    return $('')
        .append('' + ' ' + group + ' (' + rows.count() + ')')
        .attr('data-name', group)
        .toggleClass('collapsed', collapsed);
,

Te mostramos las comentarios y valoraciones de los usuarios

Si para ti ha resultado provechoso nuestro post, sería de mucha ayuda si lo compartieras con más seniors de esta manera nos ayudas a extender nuestra información.

---

---

Utiliza Nuestro Buscador