3

Quisiera agregar un nuevo subnivel a mi fila secundaria sobre una tabla que tengo hecha con la ayuda de Datatables, en esta ocasión quiero generar un nuevo hijo a mi fila secundaria, adjunto un ejemplo con el que quiero explicar y que encontré de Datatables que es a lo que quiero llegar, solo que me confunde un poco la sintaxis que se usa aquí contra la que uso en mi código actual.

Anexo el código Javascript con el cual construyo mi Datatable con una sola fila secundaria:

/* Formatting function for row details - modify as you need */
function format1(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
                            </th>
                            <th>
                                No. Consecutivo
                            </th>
                        </tr>
                        </thead>
                        <tbody>`;
                            d.Consecutivo.forEach(f => {
                                tabla += `<tr>
                                <td>${f.Fecha}</td>
                                <td>${f.Consecutivo}</td>                             
                                </tr>`;
                            });
                       tabla += '</tbody></table>';
                       return tabla;

}

$(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" : "Monto"},
             { "data" : "TipoMoneda" },
             { "data" : "Estatus" },                  
        ],
         order : [[1, 'desc']],
    } );

    
    // Add event listener for opening and closing details
    $('#example tbody').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(format1(row.data())).show();
            tr.addClass('shown');
        }
    });
}); 

Agradecería si alguien puede darme un poco de orientación en este tema.

Actualización 1:

Posiblemente la pregunta sea un poco confusa pero con esto explico un poco mas a detalle, el encabezado donde se encuentra la OrdenCompra es la fila padre, el encabezado No. Consecutivo es fila hija de la fila padre OrdenCompra y el encabezado Fecha es fila hija de No. Consecutivo

Actualización 2:

Entre búsqueda y búsqueda de documentación me encontré con otro ejemplo, pero aun no me da una idea mas clara, no se si es necesario modificar el código que estoy usando y adaptarlo a lo que he encontrado en los ejemplos o con el código que estoy usando se puede realizar lo que tengo planeado.

Actualización 3:

Intentando realizar el aporte de una de las respuesta, me encuentro con el siguiente error:

Uncaught ReferenceError: d is not defined

Aquí a continuación el codigo que uso:

/* Formatting function for row details - modify as you need */
function format1(d) {
    // `d` is the original data object for the row
    console.log(d);      

      let tabla = `<table id="tb-${d.OrdenCompra}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
                    <thead>
                        <tr>
                            <th>
                            </th>
                            <th>
                                Fecha
                            </th>
                            <th>
                                No. Consecutivo
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        </table>`;
                        return $(tabla).toArray();
}

$(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" : "Monto"},
             { "data" : "TipoMoneda" },
             { "data" : "Estatus" },                  
         
        ],
         order : [[1, 'desc']],
    } );

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

        //Se agrega fila de primer nivel, segun el ejemplo es No. Consecutivo
        let rowData = NoConsecutivo.data;

        let tbId = `#tb-${d.OrdenCompra}`;

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');

            $(tbId).DataTable().destroy();
        }
        else {
            // Open this row
            row.child(format1(row.data())).show();

            $(tbId).DataTable({
                //Se agrega la fila de segundo nivel, segun el ejemplo es la Fecha
                rowData.Fecha,
            });

            //No es necesario agregar una fila de tercer nivel por eso se comenta
         /*   $(tbId).on('click', 'td.details-control', function(){

            });*/
            
            tr.addClass('shown');
        }
    });

Actualización 4:

Mejorando un poco mas el código he llegado a este punto donde logro ubicar el botón para expandir la segunda fila hija pero este al dar click sobre el no se expande. Adjunto ejemplo y comparto el código ya un poco mejorado:

introducir la descripción de la imagen aquí

/* Formatting function for row details - modify as you need */
    function format1(d) {
        // `d` is the original data object for the row
        console.log(d);      
    
          let tabla = `<table id="tb-${d.OrdenCompra}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
                        <thead>
                            <tr>
                            <th>
                                No. Consecutivo
                            </th>
                                <th>
                                    Fecha
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            </table>`;
                            return $(tabla).toArray();                        
    }

    $(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"
                }
             },    
             //"array.json",
             columns: [          
                 {
                     "className":      'details-control',
                     "orderable":      false,
                     "data":           null,
                     "defaultContent": ''
                 },
                 { "data" : "OrdenCompra" },
                 { "data" : "FechaOrdenCompra" },
                 { "data" : "Monto"},
                 { "data" : "TipoMoneda" },
                 { "data" : "Estatus" },                  
            ],
             order : [[1, 'desc']],
        } );
    
        
        // Add event listener for opening and closing details
        $('#example tbody').on('click', 'td.details-control', function () {
          let tr = $(this).closest('tr');
            let row = $('#example').DataTable().row(tr);
    
            let rowData = row.data();
    
            let tbId = `#tb-${rowData.OrdenCompra}`;
    
            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
    
                $(tbId).DataTable().destroy();
            }
            else {
                // Open this row
                row.child(format1(rowData)).show();
    
                $(tbId).DataTable({                
                    data: rowData.Consecutivo,
                "searching": false,
                "bPaginate": false,
                "info" : false,
    
                    columns: [
                    {
                        "className": 'details-control1',
                        "orderable": false,
                        "data": null,
                        "defaultContent": ''
                    }, 
                        
                        { data: 'Consecutivo' },
                        { data: 'Fecha' },
                    ],
    
                });

$(tbId).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(format1(row.data())).show();
                    tr.addClass('shown');
                } 
            });
                
                tr.addClass('shown');
            }
        });

Aun no logro saber porque no se me ubica la segunda fila hija debajo de la primera fila hija.

Actualización 5:

Probando la actualizacion de la respuesta ahora me estoy encontrando con este error:

Uncaught ReferenceError: Cannot access 'rowData' before initialization

El código que estoy usando ahora según la actualización de la respuesta es la siguiente:

/* Formatting function for row details - modify as you need */
function format2(d) {
    // `d` is the original data object for the row
    console.log(d);      

    let tabla = `<table id="tb-${d.Consecutivo}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
    <thead>
        <tr>
            <th>
                Fecha
            </th>
        </tr>
        </thead>
        <tbody>
        </tbody>
        </table>`;
        return $(tabla).toArray();

}

$(document).ready(function () {
   $('#example').dataTable( {
        responsive : true,
        // "processing": true,
        // "serverSide": 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" : "Monto"},
             { "data" : "TipoMoneda" },
             { "data" : "Estatus" },                    
        ],
         order : [[1, 'desc']],
    } );

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

        let rowData = row.data();

        let tbId = `#tb-${rowData.OrdenCompra}`;

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');

            $(tbId).DataTable().destroy();
        }
        else {
            // Open this row
            row.child(format1(rowData)).show();

            let rowData = row.data();

            $(tbId).DataTable({    

                data: rowData.Consecutivo,
                "searching": false,
                "bPaginate": false,
                "info" : false,

                columns: [
                    {
                        "className": 'details-control1',
                        "orderable": false,
                        "data": null,
                        "defaultContent": ''
                    },               
                    { data: 'Consecutivo' },
                ]

            });

            // Add event listener for opening and closing details
            $('[id^="tb-"]').find('tbody').on('click', 'td.details-control', function () {
                let tr = $(this).closest('tr');
                // No estoy seguro de esta parte, pero deberías obtener la tabla correcta
                let parentTable = $(tr).closest('table');
                // Desde la tabla se obtienen los datos para crear la hija
                let row = $(parentTable).DataTable().row(tr);
                // ID de la nueva tabla hija
                let tbId = `#tbc-${rowData.Consecutivo}`;

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                    // Destruir tabla hija (no entiendo porqué)
                    $(tbId).DataTable().destroy();
                }
                else {
                    // Open this row
                    row.child(format1(rowData)).show();
                    // Vas a necesitar los datos de la fila
                    // Se supone que solo tienes Consecutivo y Fecha
                    let rowData = row.data();
                    // Activar la tabla hija como DataTable
                    $(tbId).DataTable({
                        // Agregar origen de datos como arreglo
                        data: [rowData],
                        // Especificar columnas
                        columns: [
                            { data: 'Fecha' },
                        ]


                    });
                }
            });            
            tr.addClass('shown');
        }
    });
});

Actualización 6:

Después de varios días sin dormir aporto este pequeño ejemplo mínimo reproducible con el objetivo de solucionar esta pregunta y darle validez

var purchase_data = [
    {
        PurchaseOrder: 789,
        DatePurchaseOrder: "27/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "Delivered",
        Consecutivo: 999,
        Date: "26/04/2021"
    }, {
        PurchaseOrder: 790,
        DatePurchaseOrder: "27/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "In Wait",
        Consecutivo: 1000,
        Date: "26/04/2021"
    }, {
        PurchaseOrder: 791,
        DatePurchaseOrder: "28/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "Delivered",
        Consecutivo: 1001,
        Date: "27/04/2021"
    }, {
        PurchaseOrder: 792,
        DatePurchaseOrder: "28/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "Delivered",
        Consecutivo: 1002,
        Date: "27/04/2021"
    },
];

/* Formatting function for row details - modify as you need */
function format1(d) {
    // `d` is the original data object for the row
    console.log(d);      

    let tabla = `<table id="tb-${d.PurchaseOrder}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
                    <thead>
                        <tr>
                            <th></th>
                            <th>
                                No. Consecutivo
                            </th>
                            <th>
                                Fecha
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>`;
                    
    return $(tabla).toArray();                        
}

$(document).ready(function () {


    $('#example').DataTable({
        data: purchase_data,  
        columns: [          
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data" : "PurchaseOrder" },
            { "data" : "DatePurchaseOrder" },
            { "data" : "Total"},
            { "data" : "Currency" },
            { "data" : "Status" }               
        ],
        order : [[1, 'desc']]
    });

    
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
    
        let tr = $(this).closest('tr');
        let row = $('#example').DataTable().row(tr);
        let rowData = row.data();
        let tbId = `#tb-${rowData.PurchaseOrder}`;

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');

            $(tbId).DataTable().destroy();
        }
        else {
            // Open this row
            row.child(format1(rowData)).show();

            $(tbId).DataTable({                
                data: [rowData],
                "searching": false,
                "bPaginate": false,
                "info" : false,

                columns: [
                    {
                        "className": 'details-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": ''
                    }, 
                    { data: 'Consecutivo' },
                    { data: 'Date' }
                ]
            });
            
            tr.addClass('shown');
        }
        
    });
    
    
});
.content {
    padding: 15px;
}

td.details-control {
    background: url(https://www.datatables.net/examples/resources/details_open.png) no-repeat center center;
    cursor: pointer;
    width: 30px;
    transition: .5s;
}

tr.shown td.details-control {
    background: url(https://www.datatables.net/examples/resources/details_close.png) no-repeat center center;
    width: 30px;
    transition: .5s;
}

table.dataTable td table.dataTable,
table.dataTable td table.dataTable * {
    border: none;
}
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<section class="content">
             
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div id="box-body" style="padding: 0px 10px 10px 10px;">  
                    <table id="example" class="table table-bordered table-hover">
                        <thead>
                            <tr>  
                                <th></th>                
                                <th>OrdenCompra</th>
                                <th>FechaOrdenCompra</th>
                                <th>Monto</th>
                                <th>Moneda</th>
                                <th>Estatus</th>      
                            </tr>              
                        </thead>
                    </table>        
                </div>             
            </div>
        </div>
    </div>
    
</section>

Recordemos por favor que Fecha debe ser hija de No. Consecutivo

Actualización 7:

Sigo sin alguna solución despues de probar la respuesta, me veo en la necesidad de agregar el codigo en como esta construido desde el back con PHP

$query = array();
                include './db/conectar.php';
                $USER = $_POST['proveedor'];
                $sql = "{call SpTest()}";
                $params = array($USER);
                $stmt = sqlsrv_query($conn, $sql, $params);
                if ( $stmt === false) {
                    die( print_r( sqlsrv_errors(), true) );
                }
                
                //Se inicializa el arreglo antes del ciclo
                $query = [];
                //Se necesita numero de orden de compra para agrupar
                $ultimaOrden = '';
            
                while( $row = sqlsrv_fetch_array($stmt) ) {

                    
                    if(strcmp($ultimaOrden, $row['PurchaseOrder']) != 0) {
                    $query[] = [
                        "PurchaseOrder"       => $row['PurchaseOrder'], 
                        "DatePurchaseOrder"  => $row['DatePurchaseOrder']->format('d/m/Y'), //Fecha de orden de compra
                        "Total"             => $row['Total'], //Monto 
                        "Currency"        => $row['Currency'], //Moneda
                        "Status"           => $row['Status'], //Estatus                     
                        "Consecutivo"          => []
                    ];
                    $ultimaOrden = $row['PurchaseOder'];
                }

                $indice = count($query) - 1;
                if($indice < 0) {
                    die('Error: No se agregó orden de compra.');
                }
                $query[$indice]["Consecutivo"][] = [
                    "Date" => $row['Date'] != null ? $row['FechaFactura']->format('d/m/Y'):"",
                    "Consecutivo"          => utf8_encode ($row['Consecutivo']),                
                ];

                }

                sqlsrv_free_stmt( $stmt);       
                sqlsrv_close($conn);

                $json = [
                    "success"=> count($query) > 0 ? true : false,
                    "data"=>$query
                ];

                echo json_encode($json);
6
  • 1
    @JuanRivera La pregunta es "Como agregar una subfila a una fila secundaria en Datatables", no es necesario explicar la sintaxis con esto me refiero a que la sintaxis que se encuentra en el ejemplo que adjunte es diferente a la que estoy usando en mi código y es eso lo que me confunde.
    – John Doe
    Commented el 28 abr. 2021 a las 16:19
  • Pregunta: ¿Realmente es necesario crear una fila hija solo para mostrar la fecha? Porque se requiere modificar la forma en que se arman los datos para poder lograrlo; aunque se puede hacer desde Javascript, pero no le veo mucho sentido que hagas una fila solo para el número y otra aparte solo para la fecha.
    – Triby
    Commented el 30 abr. 2021 a las 22:48
  • let row = $('#example').DataTable(Creo que esto no debería estar vacío).row(tr);
    – imili
    Commented el 1 may. 2021 a las 19:47
  • @John Doe, La verdad ni idea, pero en el ejemplo que diste nunca lo usan de esa manera. Tienen las tablas padre e hijas como variables globales y en esa linea hacen algo como childTable1.row(tr) en vez de volver a llamar a DataTable() me suena que haciendo eso deshaces la definición que habías hecho antes, pero no sé. Lo ideal es siempre poner un ejemplo mínimamente completo como para que uno lo pueda testear.
    – imili
    Commented el 4 may. 2021 a las 14:17
  • Revisa todos los índices, en el ejemplo pusiste PurcaseOrder y Date y en PHP generas OrdenCompra y FechaFactura, solo por poner un par de ejemplos.
    – Triby
    Commented el 5 may. 2021 a las 21:40

1 respuesta 1

3
+100

De acuerdo al enlace que proporcionaste, hay varios pasos a realizar, el primero es que en la función format1() solo creas la tabla y la devuelves como arreglo de jQuery (no me queda claro porqué):

function format1(d) {
      // Debes asignar ID
      let tabla = `<table id="tb-${d.OrdenCompra}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
                    <thead>
                        <tr>
                            <th></th>
                            <th>No. Consecutivo</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>`;
    return $(tabla).toArray();
}

Cuando manipulas las "filas secundarias" (tabla hija), debes llenar y activar como DataTable al mostrar y destruir al ocultar:

// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
    let tr = $(this).closest('tr');
    let row = $('#example').DataTable().row(tr);
    // ID de tabla hija
    let tbId = `#tb-${rowData.OrdenCompra}`;

    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
        // Destruir tabla hija (no entiendo porqué)
        $(tbId).DataTable().destroy();
    }
    else {
        // Open this row
        row.child(format1(rowData)).show();
        // Vas a necesitar los datos de la fila
        let rowData = row.data();
        // Activar la tabla hija como DataTable
        $(tbId).DataTable({
            // Agregar origen de datos
            data: rowData.Consecutivo,
            // Especificar columnas
            columns: [
                {
                    "className":      'details-control',
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": ''
                },
                { data: 'Consecutivo' },
            ]
        });
        tr.addClass('shown');
    }
});

Desconozco si esto va a funcionar, pero, por la lógica mostrada en el primer enlace de ejemplo, se supone que deberías seguir estos pasos:

Para crear otra tabla hija, primero necesitas otra función para representar los datos:

function format2(d) {
      // Debes asignar ID con base en el consecutivo
      let tabla = `<table id="tbc-${d.Consecutivo}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
                    <thead>
                        <tr>
                            <th>Fecha</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>`;
    return $(tabla).toArray();
}

Escucha los clics en el cuerpo de la tabla hija:

// Add event listener for opening and closing details
$('[id^="tb-"]').find('tbody').on('click', 'td.details-control', function () {
    let tr = $(this).closest('tr');
    // No estoy seguro de esta parte, pero deberías obtener la tabla correcta
    let parentTable = $(tr).closest('table');
    // Desde la tabla se obtienen los datos para crear la hija
    let row = $(parentTable).DataTable().row(tr);
    // ID de la nueva tabla hija
    let tbId = `#tbc-${rowData.Consecutivo}`;

    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
        // Destruir tabla hija (no entiendo porqué)
        $(tbId).DataTable().destroy();
    }
    else {
        // Open this row
        row.child(format1(rowData)).show();
        // Vas a necesitar los datos de la fila
        // Se supone que solo tienes Consecutivo y Fecha
        let rowData = row.data();
        // Activar la tabla hija como DataTable
        $(tbId).DataTable({
            // Agregar origen de datos como arreglo
            data: [rowData],
            // Especificar columnas
            columns: [
                { data: 'Fecha' },
            ]
        });
        tr.addClass('shown');
    }
});

Ya con la edición que hiciste para trabajar con un ejemplo verificable es más fácil llegar al resultado:

var purchase_data = [
    {
        PurchaseOrder: 789,
        DatePurchaseOrder: "27/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "Delivered",
        Consecutivo: [
            { Consecutivo: 997, Date: "26/02/2021" },
            { Consecutivo: 998, Date: "26/03/2021" },
            { Consecutivo: 999, Date: "26/04/2021" },
        ]
    }, {
        PurchaseOrder: 790,
        DatePurchaseOrder: "27/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "In Wait",
        Consecutivo: [
            { Consecutivo: 1000, Date: "26/04/2021" }
        ]
    }
];

/* Formatting function for row details - modify as you need */
function format1(d) {
    // `d` is the original data object for the row

    let tabla = `<table id="tb-${d.PurchaseOrder}" class="tb-consecutivo" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
                    <thead>
                        <tr>
                            <th></th>
                            <th>No. Consecutivo</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>`;
                    
    return $(tabla).toArray();                        
}

function format2(d) {
    let tabla = `<table id="tbc-${d[0].Consecutivo}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
                    <thead>
                        <tr>
                            <th>Fecha</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>`;
    return $(tabla).toArray();                        
}

$(document).ready(function () {


    $('#example').DataTable({
        data: purchase_data,  
        columns: [          
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data" : "PurchaseOrder" },
            { "data" : "DatePurchaseOrder" },
            { "data" : "Total"},
            { "data" : "Currency" },
            { "data" : "Status" }               
        ],
        order : [[1, 'desc']]
    });

    
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
    
        let tr = $(this).closest('tr');
        let row = $('#example').DataTable().row(tr);
        let rowData = row.data();
        let tbId = `#tb-${rowData.PurchaseOrder}`;

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');

            $(tbId).DataTable().destroy();
        }
        else {
            // Open this row
            row.child(format1(rowData)).show();

            $(tbId).DataTable({                
                data: rowData.Consecutivo,
                "searching": false,
                "bPaginate": false,
                "info" : false,

                columns: [
                    {
                        "className": 'child-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": ''
                    }, 
                    { data: 'Consecutivo' },
                ]
            });
            
            tr.addClass('shown');
        }
        
    });
    // Escuchar clics en details-control de tablas hijas para crear sub-sub-tabla
    $('#example tbody').on('click', '.tb-consecutivo td.child-control', function () {
        let tr = $(this).closest('tr');
        let table = tr.closest('table');
        let row = $(table).DataTable().row(tr);
        // rowData debe ser un arreglo de un solo objeto
        let rowData = [row.data()];
        // ID de la tabla a mostrar u ocultar
        let tbId = `#tbc-${rowData[0].Consecutivo}`;
        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');

            $(tbId).DataTable().destroy();
        }
        else {
            // Open this row
            row.child(format2(rowData)).show();

            $(tbId).DataTable({                
                data: rowData,
                "searching": false,
                "bPaginate": false,
                "info" : false,

                columns: [
                    { data: 'Date' },
                ]
            });
            
            tr.addClass('shown');
        }
    });
});
.content {
    padding: 15px;
}

td.details-control, td.child-control {
    background: url(https://www.datatables.net/examples/resources/details_open.png) no-repeat center center;
    cursor: pointer;
    width: 30px;
    transition: .5s;
}

tr.shown td.details-control, tr.shown td.child-control {
    background: url(https://www.datatables.net/examples/resources/details_close.png) no-repeat center center;
    width: 30px;
    transition: .5s;
}

table.dataTable td table.dataTable,
table.dataTable td table.dataTable * {
    border: none;
}
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<section class="content">
             
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div id="box-body" style="padding: 0px 10px 10px 10px;">  
                    <table id="example" class="table table-bordered table-hover">
                        <thead>
                            <tr>  
                                <th></th>                
                                <th>OrdenCompra</th>
                                <th>FechaOrdenCompra</th>
                                <th>Monto</th>
                                <th>Moneda</th>
                                <th>Estatus</th>      
                            </tr>              
                        </thead>
                    </table>        
                </div>             
            </div>
        </div>
    </div>
    
</section>

2
  • @JohnDoe, listo; en la tabla hija cambié la clase details-control por child-control para evitar conflictos con la tabla padre. Lógicamente, también lo agregué en CSS. La respuesta está basada en el formato de datos que propusiste originalmente, donde Consecutivo es un arreglo de objetos con número y fecha cada uno.
    – Triby
    Commented el 5 may. 2021 a las 20:51
  • Que tal, oigan estoy buscando una forma similar a la tabla que se construyó aquí, pero mi tema es el siguiente, dentro del Json que recibo, esto puede tener N sub Hijos es decir que puede estar así Padre = p; hijo = h P>h>h>h>N dependiendo lo que venga en un Json que recibo de back hay alguna forma de hacer? Commented el 9 jul. 2021 a las 15:46

Tu Respuesta

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

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