Necesito mostrar los datos de un resultado de AJAX en una tabla con el plugin DataTables al hacer click sobre cada fila. Entiendo que debo hacerlo con los datos en formato JSON, pero no entiendo cómo incluir los datos en la tabla. Aquí mi código.
var tableSucursal = $('#SucursalesTabla').DataTable(
{
responsive: true,
rowReorder: true,
"scrollX": true
});
tableSucursal.rows().every( function interno(d) {
this.child( '<table id="InternosTabla" width="100%"><thead><tr><th class="id">Apellido</th><th>Nombre</th><th>Cargo</th><th>Teléfono</th><th>Móvil</th><th colspan="2">E-mail</th><th>Observaciones</th><th align="center"><a id="AgregarInternos" style="cursor:pointer; display:none;" onclick="AgregarInternos();">Nuevo</a></tr></th>'+
'</thead>'+
'<tbody>'+
'<tr class="Internos">'+
'<td id="idintaut" class="idinterno" style="display:none;" data-campo="id_intaut">'+d.idintaut+'</td>'+
'<td id="intaut" class="" data-campo="apellido"><span></span></td>'+
'<td id="intaut" class="" data-campo="nombres"><span></span></td>'+
'<td id="intaut" class="" data-campo="cargo"><span></span></td>'+
'<td id="intaut" class="" data-campo="telfijo"><span></span></td>'+
'<td id="intaut" class="" data-campo="telmovil"><span></span></td>'+
'<td id="intaut" class="" data-campo="email" colspan="2"><span></span></td>'+
'<td id="intaut" class="" data-campo="observaciones"><span></span></td>'+
'<td id="intaut" class="" data-campo="ActivoNoActivo" align="center"><span></span></td>'+
'</tr>'+
'</tbody>'+
'</table>'
);
});
var tableInternos = $('#InternosTabla').dataTable().api();
function datos(sucursal) {
$.ajax({
type: "POST",
url: "clientes_showint.php",
data: {sucursal:sucursal},
dataType: "json",
success: function(data){
var $table = $('#InternosTabla').DataTable();
$table.clear().rows.add(data);
$table.draw();
}
});
}
//Muestra u oculta los child. (Funciona bien)
$('#SucursalesTabla tbody').on( 'click', 'tr', function () {
var tbody = $(this).closest('tbody');
var tr = $(this).closest('tr');
var row = tableSucursal.row( tr );
var child = tableSucursal.row(this).child;
var sucursal=$(this).closest("tr").find(".id").text();
if (row.child.isShown()) {
row.child.hide();
}
else {
row.child.show();
row.child(datos(sucursal)).show();
}
});