Correct Way of Placing Column Filters In Header, scrollX

BrianA12

Hello again

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');

• Please refer to the test case on http://live.datatables.net/jiqakeru/4/edit?html,css,js,console,output

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

colin

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

BrianA12

@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

colin

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

Colin

BrianA12

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!

colin

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

BrianA12

@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

kthorngren

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

BrianA12

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

kthorngren

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

BrianA12

@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

colin

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

kthorngren

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

BrianA12

@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