Pregunta JQuery DataTables - Agrupación de filas, suma, plegable, exportación


He estado usando JQuery DataTables durante mucho tiempo. Esta es la primera vez que trabajaré con la agrupación de filas. Encontré un buen ejemplo de dónde quiero comenzar. - Agrupamiento

  1. ¿Cómo agregaría un extra <td> a la fila agrupada? ¿Qué sucede si quiero mostrar la suma de los salarios agrupados en esa fila agrupada? En este momento, parece que solo puedes mostrar el nombre del grupo.

enter image description here

  1. ¿Puedo hacer que estas filas sean plegables como si fueran aquí y aquí? Parece que este es un complemento diferente del código de agrupación original. Esta vista sería mi preferencia, pero trabajar con filas secundarias no parece ser lo mismo que agrupar.

Información adicional

Devolveré los datos de una fuente de Ajax.

ACTUALIZACIÓN 1

Entonces, construí una tabla con agrupación de filas y encontré este ejemplo de cómo resumir una columna. Estoy conectando ese valor en un <td> en esa fila de grupo. Todo lo que necesito ahora es cómo dividir la suma de esa cantidad en grupos en lugar de la suma de la columna completa. Necesito ayuda con esto.

"drawCallback": function (settings) {
    var api = this.api(), data;
    var rows = api.rows({ page: 'current' }).nodes();
    var last = null;

    //Calculates the total of the column
    var total = api
        .column(5)  //the salary column
        .data()
        .reduce(function (a, b) {
            return a + b;
        }, 0);

    //Groups the Office column
    api.column(2, { page: 'current' }).data().each(function (group, i) {
        if (last !== group) {
            $(rows).eq(i).before(
                '<tr class="group"><td>' + group 
                 + '</td><td></td><td></td><td></td><td>' 
                 + total + '</td></tr>'
            );

            last = group;
        }
    });                  
}

ACTUALIZACIÓN 2

No me parece que DataTables pueda proporcionar toda la funcionalidad que necesito. La agrupación de filas no tiene subtotales integrados o collapsiblity. Incluso si puedo crear algo personalizado para hacer eso, parece que estas filas de grupo no se recogen durante las exportaciones, que es otro requisito que necesito. Probablemente tendré que ir a otra ruta. A menos que alguien pueda satisfacer todas estas necesidades, no te molestes.

ACTUALIZACIÓN 3

Decidí ir con Kendo Grids en su lugar. Toda esta funcionalidad ya está incorporada.


32
2017-12-06 21:11


origen


Respuestas:


"drawCallback": function ( settings ) {
	var api = this.api(),data;
	var rows = api.rows( {page:'current'} ).nodes();
	var last=null;
	
	// Remove the formatting to get integer data for summation
	var intVal = function ( i ) {
		return typeof i === 'string' ?
			i.replace(/[\$,]/g, '')*1 :
			typeof i === 'number' ?
				i : 0;
	};

	total=new Array();
	api.column(2, {page:'current'} ).data().each( function ( group, i ) {
	    group_assoc=group.replace(' ',"_");
        if(typeof total[group_assoc] != 'undefined'){
            total[group_assoc]=total[group_assoc]+intVal(api.column(5).data()[i]);
        }else{
            total[group_assoc]=intVal(api.column(5).data()[i]);
        }
		if ( last !== group ) {
			$(rows).eq( i ).before(
				'<tr class="group"><td colspan="4">'+group+'</td><td class="'+group_assoc+'"></td></tr>'
			);
			
			last = group;
		}
	} );
    for(var key in total) {
        $("."+key).html("$"+total[key]);
    }
}


2
2018-02-26 16:55



Revisé tu código y revisé tu enlace con un ejemplo.

También revisé tu UPDATE

Encontré que el **Kendo Grids** es la mejor opción según su requisito.

Entonces sugiero usar: ACTUALIZACIÓN 3


1
2017-12-31 16:47



Mira en tu código la línea ... "if (last! == group) Agregué 2 botones:

  • expande-> llama función 'abrir'
  • cerrar-> función de llamadas 'cerrar'

ambos reciben el ejemplo del elemento de grupo: 'MAZDA', 'TOYOTA', 'BMW'

if (last !== group)
{
groupid++;
alert(group);
$(rows).eq(i).before(
'<tr class="group father_' + group + ' text-right"><td class="text-left"><text class="order">'
+ group +
'</text>'+
' <i class="fa fa-plus-square-o" aria-hidden="true" btn btn-default btn-xs" onclick="abrir(\''+group+'\')">'+
' <i class="fa fa-minus-square-o aria-hidden="true"  btn btn-default btn-xs" onclick="cerrar(\''+group+'\')">'+
'</td></tr>');
last = group;
}

Aquí están las funciones 'abrir' y 'cerrar' Pongo em fuera de la secuencia de comandos de datatables

<script>
    function abrir(group) {
        $(".collapse_"+group).collapse("show");
    }

    function cerrar(group) {
        $(".collapse_"+group).collapse("hide");
    }
</script>

Luego, después del drawcallback que uso (esta es la clave):

"fnRowCallback": function (nRow, aData, iDisplayIndex)
 {
   nRow.className = "collapse collapse_" + aData.LINEA;
   return nRow;
 },

¿Qué estoy haciendo aquí? ... Para cada fila simple agrega la clase de arranque "colapso" y mi propia clase colapso_ + aData.LINEA donde linea es de campo que estoy agrupando por fin finalmente -> clase = "colapso colapso_MAZDA"                  class = "collapse collapse_BMW"

Estos elementos pueden estar ocultos por defecto, cuando actives los botones en las filas del grupo buscará los elementos que tienen la clase "collapse_MAZDA" AN


0
2017-08-23 14:43