Search box column at the top of the table

Search box column at the top of the table

johngtrsjohngtrs Posts: 33Questions: 2Answers: 0

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.

Replies

  • allanallan Posts: 63,552Questions: 1Answers: 10,477 Site admin

    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

  • johngtrsjohngtrs Posts: 33Questions: 2Answers: 0

    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.

  • allanallan Posts: 63,552Questions: 1Answers: 10,477 Site admin

    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

  • allanallan Posts: 63,552Questions: 1Answers: 10,477 Site admin

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

    Allan

  • johngtrsjohngtrs Posts: 33Questions: 2Answers: 0
    edited August 2015

    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.

  • allanallan Posts: 63,552Questions: 1Answers: 10,477 Site admin

    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

  • johngtrsjohngtrs Posts: 33Questions: 2Answers: 0

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

  • allanallan Posts: 63,552Questions: 1Answers: 10,477 Site admin
    $('#myInput1').on( 'keyup', function () {
      myTable.column( 0 ).search( this.value ).draw();
    } );
    

    Not hard at all ;-)

    Allan

  • johngtrsjohngtrs Posts: 33Questions: 2Answers: 0

    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" :/

  • johngtrsjohngtrs Posts: 33Questions: 2Answers: 0

    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 ?

  • johngtrsjohngtrs Posts: 33Questions: 2Answers: 0

    Ok it works ! Thanks again Allan.

This discussion has been closed.