AnswerBun.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!

Related Questions

Formato adecuado para implementar videos en Android Studio

1  Asked on August 26, 2021 by cristian-sierra

 

Rellenar un array con valores de otro array

2  Asked on August 26, 2021 by diego-sanchez

   

Al entrar en vim se me activa el replace

1  Asked on August 26, 2021

     

Error al correr: php public/index.php en proyecto Zend

1  Asked on August 26, 2021 by esteban-ali-yaez-badillo

 

¿Cómo relacionar elementos de un Array entre ellos?

2  Asked on August 26, 2021 by nicolas-oate

     

¿Cómo puedo mostrar los datos de una pila?

1  Asked on August 26, 2021 by tutos-tiles-para-gente-til-201

 

contar items en node js

2  Asked on August 26, 2021 by santiago-martinez

   

update en c# con base sql server

1  Asked on August 26, 2021 by rodrigo-arturo

     

¿Por que al querer insertar una variable a mi BD me da parse error?

1  Asked on August 26, 2021 by diego-goncalves

 

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP