Jquery dataTables with filter Combobox


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 already saw examples that you can add comboxes in the footer, under each column of the table and filter in that way, but aesthetically I do not like it and also, I just need a filter combo.

asked by Emiliano Torres 20.10.2016 в 16:38

1 answer


I'm not very good with jQuery but you can add a combobox on top of your table and launch 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;
                  $('#idDepartamento').on('change', function() {
                      var val = $(this).val();
                      column.search(val ? '^' + val + '$' : '', true, false)

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

I'll leave you the jsFiddle

answered by 20.10.2016 / 18:01