Home / Questions / 28993
Accepted
Emiliano Torres
Asked: 2020-10-21 06:38:29 +0800 CST 2020-10-21 06:38:29 +0800 CST

Jquery dataTables with Filter Combobox

  • 772

I am using jquery dataTables and I want to add a filter combo for a specific field in the location after "Search"... is this possible? I've already seen examples that you can add comboxes in the footer, under each column of the table and filter that way, but aesthetically I don't like it and besides, I just need a filter combo.

jquery

1 Answers

  1. Best Answer

    I'm not very good with jQuery but you can add a combobox on top of your table and fire an event when you change it.

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

    Edit : I added it to the height of the search field

    I leave you the jsfiddle

    • 3