Jquery dataTables con Combobox de filtro

publicado por: Anonymous

Estoy usando jquery dataTables y quiero agregar un combo de filtrado para un campo especifico en la ubicación a continuacion de “Search”…es posible esto?. Ya ví ejemplos que se pueden agregar comboxes en el footer, debajo de cada columna de la tabla y filtrar de esa forma, pero estéticamente no me gusta y ademas, solo necesito un combo de filtrado.

solución

No soy muy bueno con jQuery pero puedes agregar un combobox arriba de tu tabla y lanzar un evento al momento de cambiarlo.

   $(document).ready(function() {
      var table = $('#tablaDetalle').DataTable({
          "bPaginate": false,
          "bLengthChange": false,
          "bFilter": true,
          "bInfo": false,
          "bAutoWidth": false,
          initComplete: function() {
              var div = $('#tablaDetalle_wrapper');
              div.find("#tablaDetalle_filter").prepend("<label for='idDepartamento'>Departamento:</label><select id='idDepartamento' name='idDepartamento' class='form-control' required><option>Seleccione uno...</option><option value='1'>  FRITURAS</option><option value='2'>REFRESCOS</option></select>");
              this.api().column(0).each(function() {
                  var column = this;
                  console.log(column.data());
                  $('#idDepartamento').on('change', function() {
                      var val = $(this).val();
                      column.search(val ? '^' + val + '$' : '', true, false)
                          .draw();
                  });
              });
          }
      });
  });

Edición: Lo agregué a la altura del campo de búsqueda

Te dejo el jsFiddle

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *