9

Tengo una tabla que hace uso de filas secundaria donde cada fila es expandible/colapsable, pero mis filas principales contienen datos duplicados como lo explico a continuación.

Quisiera agrupar mis filas secundarias o child row, como se llaman en la documentación oficial de Datatables, donde tengo la siguiente tabla en donde en la fila padre existen las columnas Orden de compra, Fecha de Orden de Compra, Moneda y Estado.

Si se fijan tengo 3 ordenes de compra que corresponden a un mismo identificador en este ejemplo es 258, pero cada orden de compra contiene una fila secundaria con una información diferente, esa información es Fecha de recepción, No. Factura, Código Articulo y Descripción.

+-----------------------------------------------------------------------+
|    | Orden de compra  | Fecha de Orden de Compra | Moneda |   Estado  |
+----+------------------+--------------------------+--------+-----------+
|  + |        258       |       06/01/2020         |   USD  | Entregado |                                
+------+---------+------------+-------------------+-------------+-------+
|   Fecha de recepción  | No. Factura | Código Articulo |  Descripción  |
+------+---------+-----------+--------------------+-------------+-------+
|       07/01/2020      |     617     |      CA0033     |       CT      |
+-----------------------------------------------------------------------+
|  + |        258       |       06/01/2020         |   USD  | Entregado |
+-----------------------+--------------------------+--------+-----------+
|   Fecha de recepción  | No. Factura | Código Articulo |  Descripción  |
+-----------------------+-------------+-----------------+---------------+
|       14/01/2020      |     620     |      CA0036     |      CTR      |
+-----------------------+-------------+-----------------+---------------+
|  + |        258       |       06/01/2020         |   USD  | Entregado |
+-----------------------+--------------------------+--------+-----------+
|   Fecha de recepción  | No. Factura | Código Articulo |  Descripción  |
+-----------------------+-------------+-----------------+---------------+
|       16/01/2020      |     626     |      CC0048     |      CTY      |
+-----------------------+-------------+-----------------+---------------+

Lo que quisiera obtener sin necesidad de repetir la Orden de compra es agrupar las filas secundarias de la siguiente manera.

    +-----------------------------------------------------------------------+
    |    | Orden de compra  | Fecha de Orden de Compra | Moneda |   Estado  |
    +----+------------------+--------------------------+--------+-----------+
    |  + |        258       |       06/01/2020         |   USD  | Entregado |                                
    +------+---------+------------+-------------------+-------------+-------+
    |   Fecha de recepción  | No. Factura | Código Articulo |  Descripción  |
    +------+---------+-----------+--------------------+-------------+-------+
    |       07/01/2020      |     617     |      CA0033     |       CT      |
    +-----------------------+-------------+-----------------+---------------+
    |       14/01/2020      |     620     |      CA0036     |      CTR      |
    +-----------------------+-------------+-----------------+---------------+
    |       16/01/2020      |     626     |      CC0048     |      CTY      |
    +-----------------------+-------------+-----------------+---------------+

Si se fijan la Orden de Compra ahora contiene agrupadas la información de las 3 mismas ordenes, es a esto a lo que quiero llegar.

El siguiente es el código de mi llamado AJAX el cual uso para construir mis tablas.

/* Formatting function for row details - modify as you need */
function format(d) {
    // `d` is the original data object for the row
    console.log(d);
    
    return '<table cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">' +
        '<tr>' +      
        '<td><strong>Fecha de Recepción: </strong></td>' + '<td><strong>No. Factura:<strong></td>' +  '<td><strong>Codigo Art:<strong></td>' +  '<td><strong>Descripcion Art:</strong></td>' +
        '</tr>' +
        '<tr>' +
        '<td>' + d.FechaFactura + '</td>' + '<td>' + d.Factura + '</td>' + '<td>' + d.Codigo + '</td>' +  '<td>' + d.Descripcion_Articulo + '</td>' +
        '</tr>' +    
        '</table>';     
}


$(document).ready(function () {
    $('#example').dataTable( {
        responsive : true,
         ajax : {
             "type": 'POST',
             "url" : './test.php',  
             "dataType": 'JSON',             
             "cache": false,
             "data": {
                 'param' : 1,                           
             },
         },
         language : {
            "lengthMenu": "Mostrar _MENU_ registros",
            "zeroRecords": "No se encontró nada",
            "info": "Mostrando del _START_ al _END_ de un total de _TOTAL_",
            "infoEmpty": "No hay registros",
            "emptyTable": "No hay datos para mostrar",
            "loadingRecords": "Cargando...",
            "processing": "Procesando...",
            "search": "Buscar:",
            "infoFiltered": "(filtrado de un total de _MAX_ registros)",
            "paginate": {
                "first": "Primera",
                "last": "Última",
                "next": "Siguiente",
                "previous": "Anterior"
            }
         },    
         columns: [          
             {
                 "className":      'details-control',
                 "orderable":      false,
                 "data":           null,
                 "defaultContent": ''
             },
             { "data" : "OrdenCompra" },
             { "data" : "FechaOrdenCompra" },
             { "data" : "TipoMoneda" },
             { "data" : "Estatus" }                 
        ],
         order : [[1, 'desc']]
    } );

    
    // Add event listener for opening and closing details
    $('#example').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = $('#example').DataTable().row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child(format(row.data())).show();
            tr.addClass('shown');
        }
    });

});

Consultando la documentación de Datatables cuenta con una extensión RowGroup pero desconozco totalmente si se pueden agrupar para filas secundarias o child rows. Estaría agradecido con cada uno de ustedes si pueden ayudarme a encontrar la salida a este problema.

Es importante recordar que, como fila principal, requiero Orden de compra, Fecha de la orden de compra, Moneda y Estado, y como fila secundaria, necesito ubicar la Fecha de recepción, No. factura, Código Artículo y Descripción.

Actualización:

Anexo un ejemplo hecho a mano de lo que quiero llegar a construir con mi tabla:

introducir la descripción de la imagen aquí

Si se fijan tengo dos ordenes de compra que cada una contiene una subfila con información. En vez de repetir cada una de las ordenes de compra los agrupo en una sola dependiendo de su ID.

En mi Javascript esta de esta manera:

/* Formatting function for row details - modify as you need */
function format(d) {
    // `d` is the original data object for the row
    console.log(d);
        let tabla = `<table cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
                    <thead>
                        <tr>
                            <th>
                                Fecha de recepción
                            </th>
                            <th>
                                No. Factura
                            </th>
                            <th>
                                Codigo Art
                            </th>
                            <th>
                                Descripcion
                            </th>
                        </tr>
                        </thead>
                        <tbody>`;
                            d.Factura.forEach(f => {
                                tabla += `<tr>
                                <td>${f.FechaFactura}</td>
                                <td>${f.Factura}</td>
                                <td>${f.Codigo}</td>
                                <td>${f.Descripcion_Articulo}</td>
                                </tr>`;
                            });
                       tabla += '</tbody></table>';
                       return tabla;
                       }

Cuando recargo mi tabla obtengo el siguiente error:

introducir la descripción de la imagen aquí

ACTUALIZACIÓN 4:

Ahora obtengo en la respuesta a mi JSON lo siguiente:

introducir la descripción de la imagen aquí

Despues de intentar la ultima modificación a la respuesta ahora obtengo lo siguiente como respuesta a mi JSON.

introducir la descripción de la imagen aquí

ACTUALIZACIÓN 5:

Ahora estoy obteniendo lo siguiente como respuesta a mi JSON

introducir la descripción de la imagen aquí

Y como alert al cargar la tabla desde la vista de Datatables obtengo lo siguiente:

introducir la descripción de la imagen aquí

ACTUALIZACIÓN 6:

Después de intentar el código que se encuentra en la respuesta obtengo resultado en el Datatable pero todas filas hijas se encuentra agrupadas en una sola fila padre para evitar esto construi el siguiente data para agrupar por fila padre y fila hija.

Después del while agregue la siguiente data agrupada:

// -- Aquí tienes toda tu data agrupada
                $group_data = group_array($query, "OrdenCompraGroup");

                // -- Creamos un nuevo array para la nueva data procesada
                $new_data = array();

                // -- Vamos armar un array padre e hijo
                foreach($group_data as $itemPadre) {
                    // -- Variables que necesitas para el padre
                    $ordenCompra = "";
                    $fechaOrdenCompra = "";
                    $TipoMoneda="";       
                    $Estatus = "";                  
                    
                    // -- Declaramos la variable donde se almacenaran los datos hijos
                    $arrayFactura = array();

                    // --
                    foreach($itemPadre["groupdata"] as $itemHijo) {
                        // -- Aquí llenamos las variables del padre, ya que se encuentran dentro del groupdata
                        $ordenCompra = $itemHijo["OrdenCompra"];
                        $fechaOrdenCompra = $itemHijo["FechaOrdenCompra"];
                        $TipoMoneda = $itemHijo["TipoMoneda"];
                        $Estatus = $itemHijo["Estatus"];

                        // -- Aquí llenamos la data del hijo
                        $arrayFactura[] = array(
                            "Factura" => $itemHijo["Factura"],                          
                            "FechaFactura" => $itemHijo["FechaFactura"], //Fecha de recepcion,
                            "Codigo" => $itemHijo["Codigo"],
                            "Descripcion_Articulo" => utf8_encode ($itemHijo["Descripcion_Articulo"]),

                        );
                    }

                    // -- Aquí llenamos el array general (En este punto tenemos los datos del padre y del hijo)
                    $new_data[] = array(
                        "OrdenCompra" => $ordenCompra,              // -- PADRE
                        "FechaOrdenCompra" => $fechaOrdenCompra,    // -- PADRE
                        "TipoMoneda" => $TipoMoneda, //PADRE
                        "Estatus" => $Estatus,//PADRE
                        "Factura" => $arrayFactura,//HIJO
                    );
                }

Pero en este punto me encuentro con el problema en que los datos no se muestran en mi Datatable, si no es una cosa es la otra.

5
  • No seria mejor tener los datos ya agrupados para recien mostrarlos en el datatable? Digo, primero hacer el codigo para agrupar y recien mostrar el 21 abr. 2021 a las 20:46
  • Me gusta tu idea, el back de mi data lo tengo en PHP, ves necesario agregarlo para completar la pregunta ?
    – John Doe
    el 21 abr. 2021 a las 20:50
  • Si, para ver que consulta haces para que arroje la primera tabla que pusistes el 21 abr. 2021 a las 20:56
  • Parece que no está recibiendo correctamente el JSON, cambia en PHP $param = $_POST['param']; por $param = $_GET['param']; e ingresa desde el navegador a test.php?param=1 para ver qué errores hay y, en todo caso, cómo se genera el JSON.
    – Triby
    el 22 abr. 2021 a las 16:46
  • Efectivamente, no se están creando las órdenes de compra. Cambia $ultimaOrden = 0; por $ultimaOrden = 'xxx';. Al inicio del ciclo agrega echo "Última: $ultimaOrden, actual: {$row['OrdenCompra']}<br>"; y dentro del bloque if agrega echo 'Orden agregada<br>'; para ver en pantalla lo que está pasando, no lo intentes en DataTable hasta haber encontrado y corregido el error.
    – Triby
    el 22 abr. 2021 a las 17:53

4 respuestas 4

8
+100

Es necesario cambiar la estructura de datos para agrupar facturas por cada orden de compra, mostrando solo orden de compra en tabla principal y todas las facturas relacionadas en filas secundarias.

En lugar de generar un elemento por cada factura, se va a hacer por orden de compra, creando un subarreglo con las facturas correspondientes, quedando así:

[
    [
        'OrdenCompra' => ###,
        'FechaOrdenCompra' => dd-mm-yyyy,
        'TipoMoneda' => xxx,
        'Estatus' => xxx,
        'Facturas' => [
            [
                'FechaFactura' => dd-mm-yyyy,
                'Factura' => xxx,
                'Codigo' => xxx,
                'Descripcion_Articulo' => xxx
            ],
            // Resto de facturas misma orden de compra
        ]
    ]
],

Sigue estos pasos:

  1. Agrega en la consulta ORDER BY OrdenCompra, Factura para facilitar la forma de crear el arreglo.
  2. Para evitar cualquier posible error, define el arreglo antes del ciclo
  3. Define una variable para almacenar la última orden de compra
  4. Dentro del ciclo, analiza si la última orden es diferente de la fila actual y, de ser el caso, inserta la fila en el arreglo y actualiza la variable
  5. Agrega los datos de factura en el arreglo correspondiente
// Inicializa el arreglo antes del ciclo
$query = [];
// Se necesita número de orden de compra para agrupar
// Por defecto, de la base de datos se obtiene una cadena
$ultimaOrden = '';
while( $row = sqlsrv_fetch_array($stmt) ) {
    // Comparar última orden de compra procesada
    // Forzando la comparación entre cadenas
    if(if(strcmp($ultimaOrden, $row['OrdenCompra']) != 0) {
        // Insertar orden de compra en arreglo
        $query[] = [
           "OrdenCompra" => $row['OrdenCompra'], //Orden de compra
           "FechaOrdenCompra" => $row['FechaOrdenCompra']->format('d/m/Y'),
           "TipoMoneda" => $row['TipoMoneda'], //Moneda
           "Estatus" => $row['Estatus'], //Estatus
           "Facturas" => [] // Arreglo para insertar facturas
        ];
        // Actualizar variable
        $ultimaOrden = $row['OrdenCompra'];
    }

    // Necesitamos acceder siempre al último elemento del arreglo
    $indice = count($query) - 1;
    if($indice < 0) {
        die('Error: No se agregó orden de compra.');
    }

    // Insertar factura actual
    $query[$indice]["Facturas"][] = [
       "FechaFactura" => ($row['FechaFactura'] != null)
           ? $row['FechaFactura']->format('d/m/Y')
           : "", //Fecha de recepcion
       "Factura" => utf8_encode ($row['Factura']), //No Factura
       "Codigo" => utf8_encode ($row['Codigo']), //Codigo Articulo
       "Descripcion_Articulo" => utf8_encode ($row['Descripcion_Articulo'])
    ];
}

// Creas el objeto a devolver
$json = [
    "success" => count($query) > 0 ? true : false,
    "data" => $query
];

echo json_encode($json);

En Javascript solo necesitas actualizar la función para crear la tabla con sus encabezados y recorrer las facturas para llenar. En vez de concatenar el HTML, es más sencillo y legible usar plantillas de texto:

function format(d) {
    // Inicializar HTML
    let tabla = `<table cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
         <thead>
         <tr>
            <th>Fecha de Recepción</strong></th>
            <th>No. Factura</th>
            <th>Codigo Art</th>
            <th>Descripcion Art</th>
         </tr>
         </thead>
         <tbody>`;
    // Recorrer facturas para agregar cada fila
    d.Facturas.forEach(f => {
        tabla += `<tr>
            <td>${f.FechaFactura}</td>
            <td>${f.Factura}</td>
            <td>${f.Codigo}</td>
            <td>${f.Descripcion_Articulo}</td>
        </tr>`;
    });
    tabla += '</tbody></table>';
    return tabla;
}

No deberías tener problema para armar los datos si se obtienen ordenados desde la consulta. Voy a ponerte un ejemplo con Javascript con la misma lógica usada en PHP.

const data = [
    {
        OrdenCompra: 258,
        FechaOrden: '06/01/2020',
        Moneda: 'USD',
        Estatus: 'Entregado',
        FechaFactura: '07/01/2020',
        Factura: 617,
        Codigo: 'CA0033',
        Descripcion: 'CT'
    },
    {
        OrdenCompra: 258,
        FechaOrden: '06/01/2020',
        Moneda: 'USD',
        Estatus: 'Entregado',
        FechaFactura: '14/01/2020',
        Factura: 620,
        Codigo: 'CA0036',
        Descripcion: 'CTR'
    },
    {
        OrdenCompra: 259,
        FechaOrden: '07/01/2020',
        Moneda: 'USD',
        Estatus: 'Entregado',
        FechaFactura: '16/01/2020',
        Factura: 625,
        Codigo: 'CA0048',
        Descripcion: 'CTY'
    },
    {
        OrdenCompra: 259,
        FechaOrden: '07/01/2020',
        Moneda: 'USD',
        Estatus: 'Entregado',
        FechaFactura: '21/01/2020',
        Factura: 630,
        Codigo: 'CA0033',
        Descripcion: 'CT'
    },
    {
        OrdenCompra: 260,
        FechaOrden: '19/01/2020',
        Moneda: 'USD',
        Estatus: 'Entregado',
        FechaFactura: '25/01/2020',
        Factura: 640,
        Codigo: 'CA0048',
        Descripcion: 'CTY'
    },
];

let ordenes = [];
let ultima = 0;
data.forEach(orden => {
    // Si la última no es igual a la actual, insertar
    if(ultima != orden.OrdenCompra) {
        // Insertar orden y crear arreglo para facturas
        ordenes.push({
            OrdenCompra: orden.OrdenCompra,
            FechaOrden: orden.FechaOrden,
            Moneda: orden.Moneda,
            Estatus: orden.Estatus,
            Factura: []
        });
        // Actualizar última orden
        ultima = orden.OrdenCompra;
    }
    // Obtener índice del último elemento
    let index = ordenes.length - 1;
    // Insertar factura
    ordenes[index].Factura.push({
        FechaFactura: orden.FechaFactura,
        Factura: orden.Factura,
        Codigo: orden.Codigo,
        Descripcion: orden.Descripcion
    });
});

console.log(ordenes);

Como ves, solo debes asegurarte que los resultados de la consulta tengan el formato y orden adecuado para armar los datos de salida; no es necesario crear otro arreglo para tratar de "componerlo".

0
2

Una forma en que lo puedes lograr es usando las funciones fnOpen y fnClose de dataTables, sin necesidad de usar la extensión RowGroup. No estoy seguro si hay una versión actualizada, estas funciones están en la versión legacy

Básicamente en vez de hacer que tus filas secundarias se añadan una a una a tu tabla principal, haces que todas las filas secundarias sean una tabla completa. Luego en tu botón de + llamas fnOpen y le pasas la tabla secundaria completa.

Sería algo más o menos así, muy parecido a lo que estás haciendo en este momento:


$(document).ready(function () {
    // La tabla principal se declara aquí y se guarda en la variable
    var dataTable = $('#example').dataTable( {
        responsive : true,
         ajax : {
             "type": 'POST',
             "url" : './test.php',  
             "dataType": 'JSON',             
             "cache": false,
             "data": {
                 'param' : 1,                           
             },
         }
...
    })


   $('#example').on('click', 'td.details-control', function () {
        
        var row = this.parentNode; // Encuentra el nodo 'tr'
     
        if ($(row).next().find('td').hasClass('detalles')) {
           // está abierta, hay que cerrarla
            dataTable.fnClose(row);
        }
        else {
            // La abres, o si necesitas puedes cargar la tabla con ajax
            dataTable.fnOpen(row, tablaSecundaria, 'detalles')
        }
    });

Si decides cargarla con ajax, lo harías en el bloque else.

4
  • Esta respuesta parece no funcionar para mi, intente realizar lo que me comentas en tu respuesta pero obtengo el siguiente error en mi consola Uncaught ReferenceError: dataTable is not defined exactamente sobre el else
    – John Doe
    el 21 abr. 2021 a las 22:11
  • Para que funcione debes declarar y asignar la variable en tu código de JS... Cuando creas el dataTable puedes asignarlo: var dataTable = $('#example').dataTable(... el 21 abr. 2021 a las 23:24
  • Puedes apoyarme por favor modificando tu respuesta para darle validez.
    – John Doe
    el 22 abr. 2021 a las 1:10
  • Realice los cambios que me indicaste y ahora obtengo el siguiente error Uncaught ReferenceError: tablaSecundaria is not defined al parecer hace falta código en tu respuesta, puedes completarlo por favor
    – John Doe
    el 22 abr. 2021 a las 1:57
0

Mis recomendaciones son las siguientes

  1. Creas un servicio en Backend solo para obtener data de ordenes de compras
  2. Creas otro servicio solo para devolver recibos dada un ID de Orden de compra
  3. La datatable la asocias solo con primer servicio
  4. El segundo Servicio lo llamas desde el Front al dar click en el boton + que extiende la fila
  5. Renderizas la mini-tabla una vez recibes el servicio
0

Puedes pre-serializar la agregación.
Obteniendo desde la base de datos un json formateado con las facturas:

SELECT vij.purchId as 'OrdenCompra'
     , pt.createdDatetime as 'FechaOrdenCompra'
     , f.moneda as 'TipoMoneda'
     , pt.purchStatus as 'Estatus'
     , '[{'
       + string_agg( concat( '  "Factura"    :"', f.factura      , '"'
                           , ', "Fecha"      :"', vij.invoiceDate, '"'
                           , ', "Codigo"     :"', vit.itemId     , '"'
                           , ', "Descripcion":"', it.nameAlias   , '"'
                           )
                   , '},{'
                   ) within group (ORDER BY f.factura DESC)
       +'}]' Facturas
  FROM pp_facturas f
    INNER JOIN dirPartyTable e 
      ON e.dataArea = f.dataAreaId    
    LEFT JOIN vendInvoicejour vij 
      ON    vij.dataAreaId = f.dataAreaId 
        AND vij.purchId = f.ordenCompra
        AND vij.invoiceId like '%'+f.factura 
    LEFT JOIN vendInvoiceTrans vit 
      ON    vit.purchId = vij.purchId 
        AND vit.invoiceId = vij.invoiceId 
        AND vit.numberSequenceGroup = vij.numberSequenceGroup 
        AND vit.internalInvoiceId = vij.internalInvoiceId 
        AND vit.dataAreaId = vij.dataAreaId      
    LEFT JOIN inventDim ind 
      ON    ind.inventDimId = vit.inventDimId 
        AND ind.dataAreaId = vit.dataAreaId
    LEFT JOIN inventTable it 
      ON    vit.itemId = it.itemId 
        AND vit.dataAreaId = it.dataAreaId
    LEFT JOIN purchTable pt 
      ON    pt.purchId = f.ordenCompra 
        AND pt.dataAreaId = f.dataAreaId
  WHERE f.rfc = 'abc000000000'
    AND f.baja = 0
    AND e.organizationType = 1
  GROUP BY vij.purchId
         , pt.createdDatetime
         , f.moneda
         , pt.purchStatus

En PHP de-serializas en un segundo nivel:

$record = array( "OrdenCompra"       => $row['OrdenCompra'], //Orden de compra
                 "FechaOrdenCompra"  => $row['FechaOrdenCompra']->format('d/m/Y'), //Fecha de orden de compra
                 "TipoMoneda"        => $row['TipoMoneda'], //Moneda
                 "Estatus"           => $row['Estatus'], //Estatus
                 "Facturas"          => json_decode($row['Facturas'])
               );

Para que el AJAX reciba algo como:

[ { OrdenCompra: 261
  , FechaOrdenCompra: '22/02/2020' 
  , Facturas : [ { Fecha : '03/03/2020', Factura : 679 }
               ]
  }
, { OrdenCompra: 262
  , FechaOrdenCompra: '03/03/2020' 
  , facturas : [ { Fecha : '07/01/2020', Factura : 617 }
               , { Fecha : '04/01/2020', Factura : 620 }
               , { Fecha : '16/01/2020', Factura : 626 }
               ]
  }
]

Para formatear las filas secundarias:

function format(d) {
    var html = '<table cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">'
             + '<tr>' 
             + '<td><strong>Fecha de Recepción: </strong></td>' 
             + '<td><strong>No. Factura:<strong></td>' 
             + '</tr>';
    d.Facturas.forEach( (fac) => {
        html += '<tr>' 
              + '<td>' + fac.Fecha + '</td>' 
              + '<td>' + fac.Factura + '</td>' 
              + '</tr>';
    });
    html += '</table>';
       
    return html;
}

Bien puedes conseguir lo mismo haciendo una consulta en PHP por cada orden de compra, pero si cuidas que los valores nulos no afecten el formato del json, puedes obtenerlo en un solo viaje a la base de datos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.