Correct Way of Placing Column Filters In Header, scrollX

Correct Way of Placing Column Filters In Header, scrollX

BrianA12BrianA12 Posts: 18Questions: 2Answers: 0

Hello again :smiley:

In my datatable, I want all column filters (whether text inputs or select menus or date-pickers for date range filtering etc...) to be in the datatable's header, below the header columns titles. After reading various comments on datatables.net, I successfully did this by adding the below code right after defining the filter inputs, to move them to the top side of the datatable:

// place filters in the header beneath column titles - Only needed once
var r = $('#example tfoot tr');
r.find('th').each(function(){
    $(this).css('padding', 8);
});
$('#example thead').append(r);
$('#search_0').css('text-align', 'center');

However, I also need horizontal scrolling on my datatable. Once I add "scrollX": true, , all my column filters move back to the footer instead of staying in the header, and some of them (not the text inputs but others which pass custom parameters to the server) stop working. (You can try it - Uncomment "scrollX": true, in the JS, and they all move to the footer)

  • I am assuming that the problem is the way I am moving the filter inputs to the header. What is the proper way of doing this - maybe in line 8 doing something like this .appendTo( $(column.header()).something... ) instead of .appendTo( $(column.footer()).empty() ) and removing the above chunk of code?

To wrap up, my final requirement is to have all filters working in the header/below header titles, and scrollX working too.

Thank you in advance for your suggestions :)
Brian

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    The best way to do is to have the double row in the header in the HTML. See this example from this thread. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

    Cheers,

    Colin

  • BrianA12BrianA12 Posts: 18Questions: 2Answers: 0

    @colin

    Hi Colin, thank you for your response. This seems to work, however, how can I specify the column index for each different filter?

    So for example, if I have some select input filters, some text inputs, some date inputs, etc., how can I specify the column index for each one? I tried adding .column([column indices here]) to your code example (http://live.datatables.net/ruyezofa/60/edit?html,css,js,console,output) but this did not work.

    $('.head', this.api().table().header().column([1,3])).each( function (i) {
    

    Thanks :smile:

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    I've added debug to my original example here - you'd removed some important bits. The key bit is column().index(),

    Colin

  • BrianA12BrianA12 Posts: 18Questions: 2Answers: 0

    Hello again @colin

    I managed to get exactly what I wanted (regarding different filters) by using different classes (naming them differently) and then using them depending on what type of filter I need in each column.

    I think this is even better than using the column index since if a column is added, there is no need to do a lot of changes in the script.

    Please refer to the test case http://live.datatables.net/suhikaki/1/edit?html,css,js,console,output to see what I did. I know that not all filters are working well but this is because I adapted my code which is much more complex and uses SSP to the example on live.datatables.net... In reality this is working perfectly for me :)

    I just want to ask:

    1. Is this way (using different class tags a correct way of doing it?

    2. The sorting order buttons/arrows are on the filters so each time a user clicks on a filter, the sorting buttons are also being activated.. How can I move the sorting arrows (those tiny ones) to the other header?

    Thanks a lot! :)

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    Glad getting there!

    1. What you've done looks good to me. That's a good way to go.
    2. You can use orderCellsTop to change which row triggers the sorting

    Colin

  • BrianA12BrianA12 Posts: 18Questions: 2Answers: 0

    @colin

    When I add the orderCellsTop option to my code, the sorting moves to the top row, as required, however, my filters stop working.

    It seems as if the orderCellsTop option is interfering with my column filters. Is there anything else I should check?

    thanks,
    Brian

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    You need to direct everything to the second header. See if this example of text inputs helps:
    http://live.datatables.net/giharaka/1/edit

    Here is a select input in the second header:
    http://live.datatables.net/dadereki/1/edit

    There are lots of threads on the forum with examples of how to use search inputs in the second header.

    Kevin

  • BrianA12BrianA12 Posts: 18Questions: 2Answers: 0

    Hi @kthorngren , thank you for your reply. The part of the problem where I needed to show the filters to the second header is working now.

    However, I am facing another small issue when trying to move the sort arrows/buttons to the other header (not the one for the filter inputs) using the orderCellsTop option.

    As I explained to @colin , when I add the orderCellsTop option to my code, the sorting moves to the top row, as required, however, my filters stop working.

    It seems as if the orderCellsTop option is interfering with my column filters.

    Brian

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited October 2020

    when I add the orderCellsTop option to my code, the sorting moves to the top row, as required, however, my filters stop working.

    Ye, you nee to pay attention to the selectors used in the examples I provided. Such as $('#example thead tr:eq(1) th').

    It seems as if the orderCellsTop option is interfering with my column filters.

    The problem is you are using this.api().table().header() which follows the orderCellsTop setting.

    Kevin

  • BrianA12BrianA12 Posts: 18Questions: 2Answers: 0

    @kthorngren

    Hi Kevin :)

    Thanks a lot for your help. I have different search input types in different columns (for example some are select inputs with different options, some text inputs, some date inputs etc., so I need a way how to specify which search/filter input goes in which column.

    I followed your test code and did this:

    var i = 3;
                        this.api().columns(i).every( function () {
                            var column = this;
                            var select = $('<select class="form-control"><option value="">View All</option></select>')
                                .appendTo( $('thead tr:eq(1) th').eq(i).empty() )
                                .on( 'keyup change clear', function () {
                                    if ( column.search() !== this.value ) {
                                        column
                                            .search( this.value )
                                            .draw();
                                    }
                                } );
    
                            select.append( '<option value="0">IoTSolutions Administrator</option>' );
                            select.append( '<option value="1">View devices and manage users</option>' );
                            select.append( '<option value="2">View devices only</option>' );
    } );
    

    In the above code snippet, var i =3 indicated that I want that select filter input in column with index = 3.

    • This worked well, even with the orderCellsTop option set to true

    • My (probably final) question is:

    Is there a way I can apply this filter, to two specific columns, say column with index 3 and index 4? Something like:

    this.api().columns([3,4]).every...
    

    and

    .appendTo( $('thead tr:eq(1) th').eq([3,4]).empty() )...
    

    This is not working - I just wanted to explain as clearly as possible what I am trying to achieve.

    Thanks in advance :)

    Brian

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    this.api().columns([3,4]).every...

    This doesn't work?

    .eq([3,4])

    I don't this the jQuery eq() takes parameters like this.

    The simplest way is to assign classes to the second header defining which type of search to apply. For example:
    http://live.datatables.net/sanuwidi/3/edit

    Kevin

  • BrianA12BrianA12 Posts: 18Questions: 2Answers: 0

    @kthorngren

    Hi Kevin,

    I followed your example code and after assigning classes and modifying my code, I got it working. Now I can for instance assign a class text-search in multiple columns (in the header) and the respective filter inputs are shown.

    Thank you and thanks @colin for your help :)

    Brian

This discussion has been closed.