1

Tengo una tabla que tiene información de equipos de computo, en la cual quiero mostrar/ocultar datos extra, como su ip, licencia, etc..

Me funciona pero de manera extraña, para que se muestren los datos debo hacer un alert() mas un return en una funcion Javascript, si elimino el alert() no se muestra nada, paso a explicar el inconveniente:

CSS: Solo para mostrar un icono de + y -:

td.details-control {
    background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
}

Una tabla del ejemplo, en la clase details-control es donde esta el control que hago con Jquery.

<table class="table table-hover table-sm">
    <thead>
        <tr>
            <th data-orderable="false"></th>
            <th>Descripción</th>
            <th>Marca</th>
            <th>Modelo</th>
            <th>Serie</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="details-control" style="font-size: 0px;">317</td>
            <td>CPU</td>
            <td>HP</td>
            <td>ProDesk 400GS SFF</td>
            <td>KAHD5861</td>   
        </tr>   
        <tr>    
            <td class="details-control" style="font-size: 0px;">316</td>
            <td>IMPRESORA</td>
            <td>XEROX</td>
            <td>D-A271</td>
            <td>123456</td>         
        </tr>
    </tbody>
</table>

Hago uso de Datatables donde encontre el siguiente codigo JQuery, sin embargo lo modifique un poco a mis conocimientos, llamando una función (format1) que me vaya a consultar los datos que requiero con Ajax.

$(document).ready(function(){
   var table = $('#example').DataTable();
   $('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var tr1 = $(this).html(); //obtengo el id del equipo para hacer la consulta de su ip, etc..
    var row = table.row( tr );
    var ingreso=format1(tr1); //llamo a la funcion que deberia devolverme los datos para agregar
    if ( row.child.isShown() ) {        
        row.child.hide(); //Se ocultan los datos
        tr.removeClass('shown');
    }else{
        row.child(ingreso).show(); //se muestran los datos
        tr.addClass('shown');
    }
});
});

Aqui la función que contiene ajax, le envio el ID y voy a consultar los datos a un PHP, asimilemos que el archivo PHP contiene un echo "192.168.1.1";

function format1(id){
    var fin;
    var parametros = {
        "id" : id
    };
    $.ajax({
        data:  parametros,
        url:   '../ConsultaController/index.php',
        type:  'post',
        beforeSend: function () {                   
        },
        success:  function (response) {                                 
            fin = '<table>'+
            '<tr>'+
                '<td>IP:'+response+'</td>'+
            '</tr>'+
            '</table>'; //Aqui guardo la IP consultada del PHP                      
        }
    }); 

   /*
   Aqui es el inconveniente:
   Si yo le Borro el alert(fin); no se carga nada en la tabla, se agrega en blanco, 
   sin embargo si yo lo dejo tan cual como esta ahora mismo, me sale el alert "undefined" pero 
   SI se me carga la IP en la tabla.
  */
    alert(fin); 
    return fin;
}

Agrego imagen mostrando que si se muestra lo requerido:

introducir la descripción de la imagen aquí

¿Cual puede ser el problema? No soy un experto y desconozco porque se necesite de un alert() para que se muestre la información.

Cualquier idea de lo que puede estar pasando me ayudaria, gracias.

0

1 respuesta 1

1

Las peticiones AJAX son asíncronas, es decir, se ejecutan en segundo plano, mientras se realizan otras tareas y por eso no puedes devolver directamente el valor.

Generalmente, los navegadores pausan la ejecución cuando se muestra una ventana de alerta o confirmación y, quiero suponer, que esa pausa da el tiempo suficiente para que se termine de ejecutar la petición.

La solución es usar el contenido devuelto directamente en la petición:

$(document).ready(function(){
   var table = $('#example').DataTable();
   $('#example tbody').on('click', 'td.details-control', function () {
      var tr = $(this).closest('tr');
      var tr1 = $(this).html(); //obtengo el id del equipo para hacer la consulta de su ip, etc..
      var row = table.row( tr );
      // Simplemente llamas a la función, enviando también la fila
      format1(tr1, tr, row);
  });
});

Dentro de la función recibes id, tr y row, para poder hacer los cambios ahí mismo:

function format1(id, tr, row){
    var parametros = {
        "id" : id
    };
    $.ajax({
        data:  parametros,
        url:   '../ConsultaController/index.php',
        type:  'post',
        beforeSend: function () {                   
        },
        success:  function (response) {                                 
            var ingreso = '<table>'+
            '<tr>'+
                '<td>IP:'+response+'</td>'+
            '</tr>'+
            '</table>'; //Aquí guardo la IP consultada del PHP

            // Aquí mismo haces los cambios necesarios
            if(row.child.isShown()) {
                row.child.hide(); //Se ocultan los datos
                tr.removeClass('shown');
            }else{
                row.child(ingreso).show(); //se muestran los datos
                tr.addClass('shown');
            }
        }
    }); 
}

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.