Me encontré con algunos problemas al intentar implementar Datatable en una ventana emergente de diálogo. A continuación se muestra mi código: Código HTML

 <a href="#" onclick="loadData();"><span class="onlineCounter bigtext">Show Counter</span></a></div> <div id="loadCounterInfo" style="min-height:400px; height: 450px;"> <table id="loadCounterTable"> <thead> <tr> <th>Vehicle Name</th> <th>Time</th> </tr> </head> <tbody> <tr> </tr> </tbody> </table> </div>

Mi código Javascript para el diálogo a continuación:

 $("#loadCounterInfo").dialog({ autoOpen: false, width: "450", height: "550", minHeight: "500", resizable: false, close: function(e, ui){ console.log("Closed LoadCounterInfo"); }, open: function(){ loadDatatableInfo(); console.log("Opened LoadCounterInfo"); } });

Tengo dos funciones javascript:

 function loadData(){ $('#loadCounterInfo').dialog('open'); } function loadDatatableInfo(){ var tabl = $('#loadCounterTable').DataTable({ paging: true, scrollY: 300, retrieve: true, ajax: { url: "func/fn_dashboard.php?cmd=load_online_info" }, columns: [ {data: 'veh_name'}, {data: 'status_time'} ] }); }

Cada vez que hago clic en el vínculo Mostrar contador, se crea un cuadro de diálogo deseado y se muestra console.log("Open LoadCounter") en la consola, al igual que cuando lo cierro.

Si debo cerrar el cuadro de diálogo y abrirlo por segunda vez, veo un fondo transparente y el cuadro de diálogo no se carga correctamente. La información de Datatable aún está cargada pero parece superpuesta. No entiendo qué está pasando aquí. si debo comentar el loadDatatableInfo, solo el cuadro de diálogo funciona perfectamente incluso cuando lo cierro y lo abro centésima vez.