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
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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP