0

Estoy generando la siguiente tabla en jQuery:

//FUNCION MOSTRAR DATOS MAESTROS
    function MostrarDatos() {
        $('.tablaDatos').html('');

        var lista="";

        for (var i = 0; i < sizeTabla; i++) {
            lista += '<tr>' +  
                        '<td class="idTabla" style="display:none>' + listaDatos[i]["Id"] + '</th>' +
                        '<td class="contratoTabla">' + listaDatos[i]["Contrato"] + '</td>' +
                        '<td class="fechaTabla">' + listaDatos[i]["Fecha"] + '</td>' +
                        '<td class="nombreTabla">' + listaDatos[i]["Nombre"] +'</td>'+
                        '<td class="nombreTabla"><button type="button" class="btn btn-success btnDetalle">Ver Detalle</button></td>' +
                        '<td class="nombreTabla"><button type="button" class="btn btn-info btnEditar">Editar</button></td>' +
                     '</tr>';
        }

        console.log(lista);

        $('.tablaDatos').append('<table class="table">'+
                                 '<thead class="thead-dark">'+
                                   '<tr>'+
                                      '<th scope="col" style="display:none;">Id</th>'+
                                      '<th scope="col">Contrato</th>'+
                                      '<th scope="col">Fecha</th>'+
                                      '<th scope="col">Nombre</th>'+
                                      '<th scope="col">Detalle</th>'+
                                      '<th scope="col">Editar</th>'+
                                   '</tr>'+
                                 '</thead>'+
                                 '<tbody>'+
                                       lista+
                                 '</tbody>'+
                               '</table>');
    }

Cosa que queda asi:

introducir la descripción de la imagen aquí

La cuestión es que quiero recuperar el numero de id (que esta oculto en la tabla) usando lo siguiente:

 var fila = $(this).closest("tr");  //obtiene la fila actual del evento
 var col = fila.find("td:eq(0)").text();  //obtiene el valor de la celda 

La cosa es que cada vez que presiono el boton detalle solo me devuelve el valor de la columna 1 visible, en este caso la columna "Contrato" y no la que esta oculta, como puedo hacer para recuperar el valor de la columna oculta? Gracias

4 respuestas 4

1

Puedes agregar un atributo al botón, por ejemplo data-id Te agrego el código que deberías editar

 '<td class="nombreTabla">
    <button type="button" data-id="'+ listaDatos[i]["Id"] +'" class="btn btn-success btnDetalle">
      Ver Detalle
    </button>
  </td>' +
 '<td class="nombreTabla">
    <button type="button" data-id="'+ listaDatos[i]["Id"] +'" class="btn btn-info btnEditar">
      Editar
    </button>
  </td>'

Ahora te haces un listener para estar pendiente de los botones

$( document ).on( 'click', '.btnDetalle', function( e ) {
 // primero corta la funcionalidad nativa del botón
 e.preventDefault(); e.stopPropagation();

 //Voilá! Aquí tienes el ID sin tanto rollo
 const id = $(this).attr('data-id');

 console.log( id );
});

Ya solo replicas el código en el botón de editar, este ejercicio hay muchas formas de hacerlo, pero te dejo un código limpio.

Espero te puedas guiar.

0

Ya que utilizas un for() para llenar tu tabla, puedes utilizar la varible $i para asignarle un numero unico a cada id de tu tabla, mas o menos de esta manera:

id="idFila<?php echo $i?>"

Asi, a tu boton de "Ver Detalles" le asignas el evento de Javascript mandando en los parametros el numero que contiene esa fila, te dare un ejemplo:

<button onclick="mostrarDatos(<?php echo $i?>);"></button>

Y en tu funcion de Javascript, tienes que recibir el parametro y asi puedes buscar el campo que requieres con su ID unica:

    function mostrarDatos(valor){
       var datos = document.getElementById("idFila"+valor).value;
    }

Espero que esto te pueda ayudar, un Saludo!

0

Yo haría lo siguiente:

A la columna oculta le agregaría un id="td"+i y en tu <button> le pasaría como parámetro el id, así solo haría referencia al td con el id que envías como parámetro

function(id){
  $('#td'+id).html()
}

Por otro lado deberías de usar templates literales para que no estés concatenando con el + todo el tiempo.

function(id){
  $(`#td${id}`).html()
}
0
0

Yo me ingenie una forma de realizarlo más fácil, ya que busqué por muchos lados y no encontraba la manera de lograr obtener el valor del id para poder actualizar o realizar cualquier otra accion deseada en el sistema.

Simplemente al ejecutar una funcion de javascript en mi aplicativo estoy mostrando la columna oculta, obteniendo el valor que se muestra en la datatable y despues volver a ocultarlo, algo tan simple y sin complicacion.

function event_detail() {
    // Mostrar la columna especificada de la tabla
    var vtable = $('#dt_info').DataTable();
    vtable.column(0).visible(true);
    // Obtener el primer valor seleccionado de la tabla
    var idtbl = $("tr.selected td:first").html();
    // Validar si el id es mayor a cero
    if (idtbl > 0) {
        // Ocultar la columna especificada de la tabla
        var vtable = $('#dt_info').DataTable();
        vtable.column(0).visible(false);
        // Demas acciones a realizar en la funcion
        alert(idtbl);
    } else {
        alert('Lo sentimos: No haz seleccionado ningun registro.');
    }
};

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.