0

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.

introducir la descripción de la imagen aquí

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

2
  • Porque no lo intentas como esta especificado en la documentación de DataTables, hay varios ejemplos, tiene una documentación gigante el 15 nov. 2018 a las 12:57
  • 1
    Justo eso estaba probando, ahora subo como lo pude solucionar, Muchas gracias Juan por la recomendación el 15 nov. 2018 a las 15:16

1 respuesta 1

0

Buscando en la referencia del DataTable pude resolverlo haciendo lo siguiente: Cuando agrego filas dinamicamente uso la funcion del pluggin add

var tabla = $('#tablaTurnos').DataTable();
tabla.row.add( 
                [
                    Check,
                    horario,
                    cupo,
                    boton
                ]).draw(false);

Donde en add() paso un array con todos los datos que se cargaran en la fila. Debe coincidir la cantidad con el thead de la tabla para que no nos genere un error.

Con eso se resolvio y pude simplicar la logica de mi función. Muchas gracias!

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.