DataTable does not work when I use dynamic table by ajax

Question

DataTable does not work when I use dynamic table by ajax

Navigation

#1 by (0 votes)

0

I am starting to use the DataTable pluggin with dynamic load of rows that I get from the server. The data is obtained by Ajax and displayed on the screen.

The problem happens that the pluggin does not recognize these rows, although they are rendered for the pluggin, as if they were not loaded, seeing in the image indicates that no results are displayed.

At the head of the application, I included the links to the datatable library

<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>

My Ajax function is as follows

$.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');
        }
    });

The function that loads the row is

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);
}
}

This function, function loads the rows well. Finally, I copy the definition in an anonymous function of the call of 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"
          }
    }});
});

If you can guide me, I would be very grateful, thank you very much

javascript jquery html5 datatables

asked by Cristian Budzicz 15.11.2018 в 13:36

source

1 answer

Folder path to external equipment Consume web services parametro xml php

score 0 · Accepted Answer

Searching in the DataTable reference I was able to solve it by doing the following: When I dynamically add rows I use the plug-in function add

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

Where in add () I pass an array with all the data that will be loaded in the row. You must match the amount with the thead of the table so that it does not generate an error.

With that, it was solved and I was able to simplify the logic of my function. Thank you very much!