estoy empezando a usar el pluggin de DataTable con carga dinamica de filas que obtengo del servidor. Los datos son obtenidos por Ajax y se muestran en la pantalla.
El problema sucede que el pluggin no me reconoce estas filas, si bien se renderizan para el pluggin es como que si no estuvieran cargados, ver en la imagen indica que no se muestra resultados.
En el head de la aplicacion, inclui los links a la libreria de datatable
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
Mi funcion Ajax es la siguiente
$.ajax
({
async:true,
method: 'GET',
url: "{{ path('turnos_listar') }}",
data: datos,
dataType: 'json',
beforeSend:inicioEnvioTurnos,
success: cargarFilasTurnos,
timeout:11500,
error : function()
{
//desbloqueo la pagina
$.unblockUI();
//accedo al alert
//var error = document.getElementById('error-turno');
//seteo el msj
//error.innerHTML = '<p>Error de conexión, por favor intente registrarse nuevamente más tarde</p>';
//muestro
//$('#error-turno').show();
alert('ERROR DE CONEXIÓN, INTENTE NUEVAMENTE MAS TARDE');
}
});
La funcion que carga la fila es
function cargarFilasTurnos(datos)
{
//desbloqueo la pagina
$.unblockUI();
borrarFilasTurnos();
var fila,horario,cupo,boton,Check;
var i;
for(i= 0;i < datos.length; i++)
{
Check = '<td><input type="checkbox" class=' + '"form-control fila-turnos"' + '/></td>';
horario = '<td>'+datos[i].horario+'</td>';
cupo = '<td>'+datos[i].cupo+'</td>';
boton = '<td> <input class="boton-ver-solicitantes btn btn-info btn-sm" type="button" value=">>" /></td>';
fila = '<tr>' + Check + horario + cupo + boton + '</tr>';
var renglon = document.createElement('TR');
renglon.innerHTML = fila;
document.getElementById('tabla-turnos').appendChild(renglon);
}
}
Esta funcion, funcion carga bien las filas. Finalmente, les copio la definicion en una func anonima de la llamada de a datatable
$(document).ready(function () {
$('#tablaTurnos').DataTable({
"oLanguage":
{
"sProcessing": "Procesando...",
"sLengthMenu": "No. Registros _MENU_ ",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
}
}});
});
Si me pueden orientar sera muy agradecido, muchas gracias