Search box column at the top of the table

johngtrs

Hi,

I'm using this https://datatables.net/examples/api/multi_filter.html and I want to set all the search boxes out of the table and at the top. It's possible ? Because I'm looking all the discussions in this forum but I see no questions about that. Everybody wants the search box at the top and in the column title... And when I click on a search box the column will be sort by ASC and DESC. And I want to keep this sorting list.

Sorry for my english.

allan

I want to set all the search boxes out of the table and at the top. It's possible ?

Yes - use dom.

See this example.

Allan

johngtrs

Thanks for your answer.

When I use "f" I can move the filter input but I can't move the filters input below each column.

allan

Oh I see. For the individual column filters, you would just modify the code shown in the example to insert into the header, or wherever you want them to appear, rather than into the footer as they are in that example.

Allan

allan

You might also be interested in this example which shows column filters outside of the table.

Allan

johngtrs

Thanks allan your answer are always amazing.

But with that it's possible to get something like that ?

filter input | filter input |

|    title1     |     title2     |     title3   |     title4   |

Do you see ? And I want to disable the filters input on the 2 last columns.

allan

Certainly possible, the code just needs to be suitably modified. Probably the easiest way is to use something like the same I linked to above, whereby you have the input elements in the page already and then just add suitable event listeners.

Allan

johngtrs

Ok thanks. I'll try this but it seems really hard :p

allan

$('#myInput1').on( 'keyup', function () {
  myTable.column( 0 ).search( this.value ).draw();
} );

Not hard at all ;-)

Allan

johngtrs

I'm using :

      function filterColumn ( i ) {
          $('#idtable').DataTable().column( i ).search(
              $('#col'+i+'_filter').val()
          ).draw();
      }
       
      $(document).ready(function() {
          $('#idtable').dataTable();
       
          $('input.column_filter').on( 'keyup click', function () {
              filterColumn( $(this).parents('tr').attr('data-column') );
          } );

but I can't put the filters input below the "show x entries" :/

johngtrs

The problem is that the filters input are out the table. Can I put this filters input just above my title and in my table ?

johngtrs

Ok it works ! Thanks again Allan.