TransWikia.com

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

Stack Overflow en español Asked by Alejandro Hernandez on December 21, 2020

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

One 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>

Correct answer by Lobos on December 21, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP