¿Cómo me refiero al registro al cual pertenece el botón DataTable?

Question

estoy trabajando con una tabla que me muestra los alumnos registrados en mi base de datos, he creado una función para obtener el detallado de la información del alumno y mostrarlo en una tabla, pero no logro que me recupere los datos del registro al cual pertenece el botón, esto es lo que he hecho:

  $(document).ready(function(){
   table = $('#alumnos').DataTable({
        "ajax":{
            "url": "consulta.php",
            "dataSrc":""
        },
        "columns":[
            {"data": "apellidos"},
            {"data": "nombres"},
            {"data": "cedula"},
            {"data": "name_group"},
            {"data": "name_sec"},

        ],
        "columnDefs": [ {
            "targets":5 ,
            "data": null,
            "defaultContent": "<button  class='btn_detalles'>Editar</button>"
        } ],
      
       orderCellsTop: true,
       fixedHeader: true

    });
            obtener_data("#alumnos tbody", table);
    
    $('#alumnos thead tr').clone(true).appendTo( '#alumnos thead' );
    
    $('#alumnos thead tr:eq(1) th').each( function (i) {
        var title = $(this).text(); //es el nombre de la columna
        $(this).html( '<input type="text" placeholder="Buscar por...'+title+'" />' );
        
        $( 'input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                table
                .column(i)
                .search( this.value )
                .draw();
            }
        } );
    } ); 
});

y aquí la función que debería devolverme la información:

var obtener_data = function(tbody, table) {




$(tbody).bind('click', '.btn_detalles', function(){
         var data = table.row( $(this).parents("tr") ).data();
         var cedu = $('#cedu').text( data.cedula);
         var cedu = $('#nombres_a').text( data.nombres);
         var cedu = $('#apellidos_a').text( data.apellidos);
         var cedu = $('#fechaNacimiento_A').text( data.F_N);
         var cedu = $('#sexo_a').text( data.sexo);
         var cedu = $('#na_a').text( data.Nacionalidad);
         var cedu = $('#pais_a').text( data.pais);
         if (data.tlf==="") {
            data.tlf = "N/A"
         }
         var Tlf = $('#tlf_a').text( data.tlf);
         if (data.correo_e==="") {
            data.correo_e = "N/A"
         }
         var Correo = $('#correo_a').text( data.correo_e);
         var cedu = $('#dir_a').text( data.direccion);
         var cedu = $('#grado_a').text( data.name_group);
         var cedu = $('#seccion_a').text( data.name_sec);
         var FechaI = $('#FechaI_a').text( data.F_I);
         var cedu = $('#rep_a').text( data.rep);

        
});

esto es lo que hice pero me devuelve que la variable tiene un valor indefinido, espero haberme explicado bien, gracias de ante mano

datatables javascript jquery

Lobos · Accepted Answer

Como los datos se cargan desde un json se debe agregar la opción initComplete al DataTable para que se ejecute la función obtener_data() cuando ya se haya renderizado la tabla.

initComplete: function() {
     obtener_data(table);
}

El código para agregar el evento clic es así:

$('.btn_detalles').bind('click', function(){
         var data = table.row( $(this).parents("tr") ).data();
         console.log(data);   
});

$(document).ready(function() {
    table = $('#alumnos').DataTable({
        "ajax": {
            "url": "https://jsonplaceholder.typicode.com/users",
            "dataSrc": ""
        },
        "columns": [{
                "data": "id"
            },
            {
                "data": "name"
            },
            {
                "data": "username"
            },
            {
                "data": "email"
            },
            {
                "data": "phone"
            },

        ],
        "columnDefs": [{
            "targets": 5,
            "data": null,
            "defaultContent": "<button  class='btn_detalles'>Editar</button>"
        }],

        orderCellsTop: true,
        fixedHeader: true,
        initComplete: function() {
            obtener_data( table);
        }

    });


    $('#alumnos thead tr').clone(true).appendTo('#alumnos thead');

    $('#alumnos thead tr:eq(1) th').each(function(i) {
        var title = $(this).text(); //es el nombre de la columna
        $(this).html('<input type="text" placeholder="Buscar por...' + title + '" />');

        $('input', this).on('keyup change', function() {
            if (table.column(i).search() !== this.value) {
                table
                    .column(i)
                    .search(this.value)
                    .draw();
            }
        });
    });
});

var obtener_data = function(table) {

    $('.btn_detalles').bind('click', function() {
        var data = table.row($(this).parents("tr")).data();
        console.log(data);
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>

<table id="alumnos" class="display" style="width:100%">
       
</table>

¿Cómo me refiero al registro al cual pertenece el botón DataTable?

One Answer

Add your own answers!

Ask a Question