3

Estoy cargando información en una tabla usando Datatables, en esta tabla me gustaría cargar cierta información en la fila padre y otra información en la fila hija usando el API de Child Rows, para mostrar los datos utilizo AJAX de esta manera:

/* Formatting function for row details - modify as you need */
function format(d) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
        '<tr>' +
        '<td>Fecha Factura</td>' +
        '<td>' + d.FechaFactura + '</td>' +
        '</tr>' +       
        '</table>';
}

$(document).ready(function () {
    var table = $('#example').dataTable( {
         "ajax": {
             "type": 'POST',
             "url" : './utileria.php',  
             "dataType": 'JSON',             
             "cache": false,
             "data": {
                 'param' : 1,               
             },
         },
         columns: [
             {
                 "className":      'details-control',
                 "orderable":      false,
                 "data":           null,
                 "defaultContent": ''
             },
             { "data" : "OrdenCompra" },             
         ],
         "order": [[1, 'asc']]
    } )
    
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.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');
        }
    });
});

Para la parte de mi servidor utilizo PHP y así es como recorro mi tabla.

<?php
    header('Content-Type: text/html; charset=utf-8');
    $param = $_POST['param'];   
    switch($param) {
        case '1': //Consulta
                $query = array();
                include './db/conectar.php';
                $sql = "select PURCHID as 'OrdenCompra',
                INVOICEDATE as 'FechaFactura'
                FROM PP_FACTURAS F";
                $stmt = sqlsrv_query($conn, $sql);
                if ( $stmt === false) {
                    die( print_r( sqlsrv_errors(), true) );
                }   
                while( $row = sqlsrv_fetch_array($stmt) ) {
                    //print_r($row);
                    $record = array(
                       "OrdenCompra"    => $row['OrdenCompra'], //Orden de compra
                       "FechaFactura"   => $row['FechaFactura'] //FechaFactura         
                    );
                    array_push($query, $record);
                }               
                sqlsrv_free_stmt( $stmt);       
                sqlsrv_close($conn);
                $json = array(
                    "success"=> count($query) > 0 ? true : false,
                    "data"=>$query
                );

                echo json_encode($json);
            break;
    
  }
?>

Aquí viene lo interesante, actualmente logro mostrar el campo OrdenCompra en mi fila padre pero quisiera que mi fila hija mostrara el campo FechaFactura, para explicar un poco mas detalle lo que quiero decir con fila padre y fila hija dejo la imagen de ejemplo.

introducir la descripción de la imagen aquí

En palabras mas palabra menos quisiera que en la fila hija mostrara el resultado del campo FechaFactura al momento de expandir la fila.

Realmente no estoy enfrentando un problema como tal de hecho en la consola no obtengo error alguno, aquí el único problema es que no se visualiza el campo FechaFactura en las filas hijas tal como lo deseo.

Este es un ejemplo que usa AJAX, proporciona un ejemplo completamente diferente y parece que no puedo entender la sintaxis allí.

Parece que no funciona, de alguna manera los datos no se entregan correctamente. Cualquier ayuda sería genial.

Actualización:

Agregue a la función format la sentencia console.log(d); para conocer los contenidos de d pero no obtengo resultados en consola.

/* 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" border="0" style="padding-left:50px;">' +
        '<tr>' +
        '<td>Invoice Date</td>' +
        '<td>' + d.InvoiceDate + '</td>' +
        '</tr>' +
        '</table>';
        
}

2 respuestas 2

1
+200

Usa la API. Tanto para instanciar, como para iniciar los sub-renglones, y controlar la visibilidad:

$(document).ready( function(){
    table = $('#example').DataTable( 
       { // Cambia data por tu Ajax
         data: [ { OrdenCompra: 1, FechaFactura: '2021-01-01' }
               , { OrdenCompra: 2, FechaFactura: '2021-02-02' }
               , { OrdenCompra: 3, FechaFactura: '2021-03-03' }
               ]
       , columns: [ { title: 'Orden de Compra' 
                    , className: 'control-detalle'
                    , orderable: true
                    , data:      'OrdenCompra'
                    }
                  ]
       } 
    );
    
    table.rows().every(
        function(){
            this.child( '<td>Fecha</td>'
                      + '<td>'+this.data().FechaFactura+'</td>' 
                      );
            this.child()[0].classList.add('child-row');
        }
    );
    
    $('#example tbody').on( 'click', 'td.control-detalle', function(){
        let tr = $(this).closest('tr');
        let row = table.row(tr);

        if( row.child.isShown() )
            row.child.hide();
        else 
            row.child.show();
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="example">
</table>

1

De acuerdo a la documentación hay diferencia en la forma de inicializar las tablas:

It is important to note the difference between $( selector ).DataTable() and $( selector ).dataTable(). The former returns a DataTables API instance, while the latter returns a jQuery object. An api() method is added to the jQuery object so you can easily access the API, but the jQuery object can be useful for manipulating the table node, as you would with any other jQuery instance (such as using addClass(), etc.)

Básicamente, cuando inicializas la tabla con .DataTable(), obtienes una instancia para acceso a la API, incluyendo todas las características. Cuando inicializas con .dataTable(), obtienes un objeto jQuery, sin acceso a características y métodos de la API.

Solo debes inicializar con D mayúscula y funciona:

/* Formatting function for row details - modify as you need */
function format(d) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
        '<tr>' +
        '<td>Fecha Factura</td>' +
        '<td>' + d.FechaFactura + '</td>' +
        '</tr>' +       
        '</table>';
}

// Crear objeto de datos para probar
let data = { data: [
  { OrdenCompra: 1, FechaFactura: '2021-03-07' },
  { OrdenCompra: 5, FechaFactura: '2021-04-15' },
]};

let table;

$(document).ready(function () {
    table = $('#example').DataTable( {
         /* **** Omitir petición AJAX
         "ajax": {
             "type": 'POST',
             "url" : './utileria.php',  
             "dataType": 'JSON',             
             "cache": false,
             "data": {
                 'param' : 1,               
             },
         },
         */
         data: data.data,
         columns: [
             {
                 "className":      'details-control',
                 "orderable":      false,
                 "data":           null,
                 "defaultContent": 'Ver detalles',
                 title: 'Detalles'
             },
             {
                 "data": "OrdenCompra",
                 title: 'Orden de Compra'
             },
         ],
         "order": [[1, 'asc']]
    } )
    
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        let tr = $(this).closest('tr');
        let row = table.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');
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="example">
</table>

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.