1

Tengo un datatables que carga aproximadamente 25.000 registros.
Actualmente, lo tengo con filtros individuales por columnas (https://datatables.net/examples/api/multi_filter.html).

Todo funciona correctamente, pero lo que necesito ahora es que al momento de cargar la página, la tabla se muestre en blanco (sin registros) y que al momento de escribir algo en el o los inputs (keyup), muestre o cargue los registros asociados a dicha búsqueda.

Actualmente mi tabla esta creada de la siguiente manera:

<div class="box-body">
 <div class="table-responsive">
  <table id="listado" class="table table-bordered table-hover dt-resposive display nowrap">
   <thead>
    <tr>
     <th>FOLIO GRAL.</th>
     <th>EMPRESA</th>
     <th>PROVEEDOR</th>
     <th>APROBADA POR</th>
     <th>FECHA APROBACION</th>
     <th>SOLICITADA POR</th>
     <th>FECHA SOLICITUD</th>
     <th>NETO</th>
     <th>IVA</th>
     <th>TOTAL</th>
     <th>OC</th>
     <th>COT</th>
     <th>COMP. PAGO</th>
    </tr>
   </thead>
  </table>
 </div>
</div>

Y su datatables correspondiente:

$(document).ready(function() {
  $('#listado').DataTable({

  "ajax" : "list_buscador.php",
  "columns" :[
  {
    "sClass": "alignRight",
    "data" : "folio_gral",
    },{
    "sClass": "alignRight",
    "data" : "null",
    'render': function (data, type, row, meta) {
      var emp = row['nom_emp'];
      return ''+emp.toUpperCase()+'';
     }
  },{
    "sClass": "alignRight",
    "data" : "null",
    'render': function (data, type, row, meta) {
      var prov = row['proveedor'];
      return ''+prov.toUpperCase()+'';
     }
  },{
    "sClass": "alignRight",
    "data" : "null",
    'render': function (data, type, row, meta) {
      var aprobada_por = row['autorizado_por'];
      if(aprobada_por == null){
        return 'SIN DATOS';
      }else{
        return ''+aprobada_por.toUpperCase()+'';
      }
     }
  },{
    "sClass": "alignRight",
    "data": "fecha_cierre",
    "render": function (data) {
      var dateString = new Date(data);
      return moment.utc(dateString).format('DD/MM/YYYY');
    }
  },{
    "sClass": "alignRight",
    "data" : "null",
    'render': function (data, type, row, meta) {
      var creado = row['creada_por'];
      return ''+creado.toUpperCase()+'';
     }
  },{
    "sClass": "alignRight",
    "data": "fecha_oc",
    "render": function (data) {
      var dateString = new Date(data);
      return moment.utc(dateString).format('DD/MM/YYYY');
    }
  },{
    "sClass": "alignRight",
    'data' : "neto",
    "render": function (data) {
     var neto = data;
     return ('$'+number_format(neto));
    }
  },{
    "sClass": "alignRight",
    'data' : "iva",
    "render": function (data) {
     var iva = data;
     return ('$'+number_format(iva));
    }
  },{
    "sClass": "alignRight",
    'data' : "total",
    "render": function (data) {
     var total = data;
     return ('$'+number_format(total));
    }
  },{
    "sClass": "alignRight",
    'data' : null,
    'render': function (data, type, row, meta) {
     var id_sol = row['id_sol'];
     var emp = row['emp'];

     return '<a href="ocPDF2.php?id_sol='+id_sol+'&emp='+emp+'" class="glyphicon glyphicon-paperclip" target="_blank" ></a>';

    }
  },{
    "sClass": "alignRight",
    'data' : null,
    'render': function (data, type, row, meta) {
      var id_sol = row['id_sol'];
      var emp = row['emp'];
      if(id_sol == null){
       return '<a href="#myModal" class="glyphicon glyphicon-pushpin" data-toggle="modal" id="' + id_sol + '" data-book-id="'+ emp +'" data-target="#ver-cot"></a>';
      }else{
       return '<a href="#myModal" class="glyphicon glyphicon-pushpin" data-toggle="modal" id="' + id_sol + '" data-book-id="'+ emp +'" data-target="#ver-cot"></a>';
     }
   }
  },{
    "sClass": "alignRight",
    'data' : null,
    'render': function (data, type, row, meta) {
     var id_sol = row['id_sol'];
     var id_doc = row['id_doc'];
     var emp = row['emp'];
     if(id_doc == null){
       return '<a href="#myModal" class="glyphicon glyphicon-barcode" data-toggle="modal" id="' + id_sol + '" data-book-id="'+ emp +'" data-target="#subedoc-modal"></a>';
     }else{
       return '<a href="#myModal" class="glyphicon glyphicon-folder-open" data-toggle="modal" id="' + id_sol + '" data-book-id="'+ emp +'" data-target="#ver-doc"></a>';
     }
    }
   }
   ],

  order: [0, "asc"],

  dom: 'Blfrtip',
    buttons: [
        'excel','print'
    ],

  "iDisplayLength": 300,
  "language": {
      "emptyTable": "SIN REGISTROS",
      "infoEmpty": "",
      "search": "Buscar _INPUT_ ",
      "info": "Mostrando Pagina _PAGE_ de _PAGES_",
      "lengthMenu": "Mostrando _MENU_ Registros",
      "infoFiltered": "(Busqueda Desde _MAX_ Registros Totales)",
      "paginate": {
        "next": "Siguiente",
        "previous": "Anterior"
      }
    },

  initComplete: function(){
    this.api().columns([0,1,2,3,4,5,6,7,8,9]).every(function () {
      let column = this;
      let title = column.header().textContent;
      // Create input element
      let input = document.createElement('input');
      input.placeholder = title;
      column.header().replaceChildren(input);

      // Event listener for user input
      input.addEventListener('keyup', () => {
        if (column.search() !== this.value) {
            column.search(input.value).draw();
        }
      });
    });
  }

 });
 });

Existe la forma de lograr eso? Cualquier orientación se agradece.

Saludos.

1 respuesta 1

1

Para evitar que DataTable realice la carga de datos automáticamente tenes que establecer deferLoading igual a 0 (cero)

[...]
Nota Tenga en cuenta que esta opción sólo tiene efecto cuando serverSide está activado. No tiene ningún efecto cuando se utiliza el procesamiento del lado del cliente.
[...]
Traducción libre.

Ejemplo:

$('#listado').DataTable({
  ajax: "list_buscador.php",
  serverSide: true,
  deferLoading: 0,
  columns:[
    {...
6
  • Estimado, gracias por tu respuesta. Acabo de agregar a mi codigo lo que me sugeriste: serverSide: true, deferLoading: 0, ajax : "list_buscador.php", columns :[ ... Efectivamente me muestra la tabla en cero, pero no muestra los filtros individuales por columna, que es lo que necesito hacer. SAludos.
    – Andres_Ha
    Commented el 26 ago. a las 17:28
  • Hola @Andres_Ha, acabo de hacer una prueba y funciona sin problemas
    – Marcos
    Commented el 26 ago. a las 18:14
  • Efectivamente muestra los filtros, pero luego de eso, al escribir en alguno de ellos no muestra ningun resultado, es mas, se queda pegado.
    – Andres_Ha
    Commented el 26 ago. a las 18:32
  • @Andres_Ha, disculpa, pero no termino de entender cual es el problema. En tu comentario anterior mencionabas que no aparecían los filtros, ahora ya aparecen pero ¿el archivo PHP no devuelve datos? Sin poder ver lo que te sucede, diría que el problema no es la configuración que te sugerí, sino algún otro cambio que has realizado.
    – Marcos
    Commented el 26 ago. a las 19:20
  • Me explico mejor. Para no cargar tantos datos en el datatables, necesito primero que la tabla se muestre en blanco, pero con los filtros individuales por columna. Luego, al escribir algo en los filtros, necesito se muestren las coincidencias en los resultados del datatables. Anteriormente, cuando aplique los cambios que me sugeriste, no aparecian los filtros pero ahora si, ya que tenia un error en mi codigo. El problema actual es que el escribir algo en los filtros, no muestra resultados en datatables. Espero haberme explicado mejor. Saludos y gracias.
    – Andres_Ha
    Commented el 26 ago. a las 19:24

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.