Ocultar/Mostrar Informacion extra en una Tabla Html con Javascript/Jquery(Ajax)

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.