1

Tengo una duda respecto a la utilización de Datatable. Para poder realizar el filtro en una tabla dinámica.

En contexto Tengo un archivo mercadeo.php que tiene un select-option y se comunica por ajax para realizar una búsqueda de mas datos ( filtros dependientes de otro select).

una vez finalizado esta búsqueda en pantalla de 3 datos (Que funciona) el ultimo ajax va a la pagina productos.php realiza una búsqueda y me devuelve 2 tablas la primera he importante es dinamica. la otra es estática y es como un formulario x.

Sin embargo quiero agregarle el dinatable.

pero si hago que el ajax. traiga toda la pagina con el script de búsqueda de dinatable asi:

            <!-- PAGINACION TABLA -->
           <script type="text/javascript"> 
// < ![CDATA[
               $('#TableId').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"
              }

                    } ,

                  }
                );
 // ]]>     
               </script> 

Me genera un error.

introducir la descripción de la imagen aquí

Si lo agrego en la pagina mercade.php que es donde llega la tabla después de la búsqueda ( el retorno de success : function(datos) ) No me genera ningún error.

Pero no aparecen los filtros.

He probado esto en otras tablas dinámicas donde no requiero utilizar ajax y funciona perfectamente.

introducir la descripción de la imagen aquí

Alguna idea de que no estoy teniendo en cuenta ?

2
  • Revisa la pestaña "Network". Tal vez el script del datatable no hay terminado de cargar en la página. Prueba usando setTimeout de 1 o 2 segundos para llamar a la función que carga tu dataTable... el 8 mar. 2018 a las 16:56
  • Intenta agregar esto a tu js: "destroy": true, el 8 mar. 2018 a las 20:06

1 respuesta 1

3

Cuando he generado una tabla dinamicamente, aplico el

$('#TableId').dataTable();

dentro del

success : function(datos){}

Mira así lo haría.

    $.ajax({
    type: "POST",
    url: "@Url.Action("GetData", "DRTSolicitudes")",                
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response)
    {               
        //Dibujar tabla
        var html = '';
        var listaJson = $.parseJSON(response);

        $('#tableX tr').remove();

        html += '<thead><tr>';
        html += '<th>' + 'Solicitud' + '</th>';
        html += '<th>' + 'Tarea' + '</th>';
        html += '<th>' + 'Descripción' + '</th>';
        html += '</tr></thead>';

        html += '<tbody>';

        $.each(listaJson, function (k, v) {              

            html += '<tr >';
            html += '<td>' + v.fiSolicitudId + '</td>';
            html += '<td>' + v.fcNombreTarea + '</td>';
            html += '<td>' + v.fcMotivoSolicitud + '</td>';
            html += '</tr>';

        });
        html += '</tbody>';

        $('#tableX').append(html);

        //Datatable

    $('#tableX').dataTable(); 

    },

    failure: function (response)
    {
    console.warn(response.responseText);
    },
    error: function (response)
    {
    console.warn(response.responseText);     
    }
    });

Por que si lo hago en el document ready me marca el mismo error que a ti.

        $(document).ready(function ()
        {
            $('#tableX').dataTable();
        });

Espero te sea útil.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.