0

Lo que estoy haciendo es seleccionar distintos archivos Json con un select. Una vez que el usuario selecciona uno de los archivos se debería desplegar el datatable en la tabla de datos. Funciona, pero si quiero cargar otro archivo no despliega los datos a pesar que en la consola se vé claramente que existe la carga. Si refresco la página y seleccione un archivo distinto que el anterior al refresco, se carga correctamente.

Es decir el problema no es de la carga de datos, si no del refresco del datatables. Buscando en el manual de datatables (la parte de Ajax) y en el foro, pero no he logrado dar con una solución al problema. He utilizado dos formas distintas de carga, pero nada:

HTML:

    <select id="fechas">
        <option value="0">Seleccione una fecha</option>
        <option value="01012019.js">01-01-2019</option>
        <option value="01022019.js">01-02-2019</option>
    </select>

    <table id="dataTable">
         <thead>
            <tr>
              <th>Fecha - Hora</th>                    
              <th>Valor Máximo</th>
              <th>Valor Mínimo</th>
              <th>Diferencia</th>                  
            </tr>
          </thead>
   </table>

JS Intento 1

$('#fechas').on('change', function(){    
    desplegarDatos(this.value);        
});

 
  function desplegarDatos( url ){

      $.getJSON(url , function(data) {
      var tabla = $('#dataTable').dataTable({
        "aaData": data,
        "aoColumns": [
                { "mDataProp": "Archivo" },
                { "mDataProp": "Maximo" },
                { "mDataProp": "Minimo" },
                { "mDataProp": "Diferencia" }
           
            ],
                paging: false,
                searching: false,
                retrieve: true
        });
     }); 

  }

JS Intento 2

$('#fechas').on('change', function(){    
    desplegarDatos(this.value);        
});

function desplegarDatos( url ){

$.ajax({
      
        type: "GET",
        url: url ,
        dataType: 'json',
        cache: false,
        success: function (obj, textstatus) {
                console.log(obj) // La consola arroja los json de forma correcta (o el uno o el otro)
                var tabla = $('#dataTable').DataTable({
                    data: obj,
                    columns: [
                        { data: 'Archivo' },
                        { data: 'Maximo' }, 
                        { data: 'Minimo' },
                        { data: 'Diferencia' }
                    ],
                    paging: false,
                    searching: false,                    
                    destroy: true,
                    serverSide: false,
                    processing: true,
                    retrieve: true
                });
            
        
        },
        error: function (obj, textstatus) {
            alert(obj.msg);
        }
    });
  }

Ambos funcionan pero solo la primera vez, si cambio el select por otro archivo, no lo recarga. Intenté con ajax.reload() en distintos lados del script, pero tampoco me resulta

1 respuesta 1

0

Probablemente necesitas alguna de estas dos optiones serverSide set to True si vas a user AJAX a bDestroy to re-generar la tabla cuando la data cambie.

  bDestroy : true,
  serverSide: true,
7
  • Gracias por tu respuesta, pero serverSide debe estar en False ya que se está trabajando por el lado del cliente no del servidor. Si lo dejas en True te arroja un error. Por otro lado ya intenté con destroy: true (Ver JS Intento 2) pero no funciona. Commented el 15 may. 2019 a las 16:00
  • si el serverSide es opcional no estaba seguro si querias usar AJAX, utiliza bDestroy en cambio de destroy el nombre es importante Commented el 15 may. 2019 a las 16:51
  • tambien puedes usar tabla.draw(); datatables.net/reference/api/draw() Commented el 15 may. 2019 a las 16:55
  • Seguí atentamente la documentación de tabla.draw() y no me resultó. Intenté también como me indicaste bDestroy y tampoco lo extraño que al ponerle un console.log(obj) se ve claramente que los array son distintos pero no se despliegan.... Commented el 15 may. 2019 a las 18:13
  • Aca hay un ejemplo funcionando de: jsfiddle.net/8obafymc/30 Commented el 16 may. 2019 a las 10:14

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.