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:
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:
ACTUALIZACIÓN 4:
Ahora obtengo en la respuesta a mi JSON lo siguiente:
Despues de intentar la ultima modificación a la respuesta ahora obtengo lo siguiente como respuesta a mi JSON.
ACTUALIZACIÓN 5:
Ahora estoy obteniendo lo siguiente como respuesta a mi JSON
Y como alert
al cargar la tabla desde la vista de Datatables obtengo lo siguiente:
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.
$param = $_POST['param'];
por$param = $_GET['param'];
e ingresa desde el navegador atest.php?param=1
para ver qué errores hay y, en todo caso, cómo se genera el JSON.$ultimaOrden = 0;
por$ultimaOrden = 'xxx';
. Al inicio del ciclo agregaecho "Última: $ultimaOrden, actual: {$row['OrdenCompra']}<br>";
y dentro del bloque if agregaecho 'Orden agregada<br>';
para ver en pantalla lo que está pasando, no lo intentes en DataTable hasta haber encontrado y corregido el error.