Column filtering above the table

RoloTomasi

Hi All,

this is what I want: https://datatables.net/extensions/searchpanes/examples/advanced/columnFilter.html. I think the usual Search pane is too big.

But I need the filtering above the table not underneath. The user shouldn't enter the site scrolling and scrolling (Generally I show the complete table) in order to state: "Hey, here are the filters! Why aren't they at the beginning of the table?"

To put the footer above the table won't do it. ;-)
Is there a possibilty to get it above the table?

Thanks in advance
Rolo

kthorngren

There are these two examples:
https://datatables.net/examples/api/multi_filter.html
https://datatables.net/examples/api/multi_filter_select.html

You can place them anywhere you would like. You can create a div and place them there or you can place them in the header. Here are the corresponding header examples:
http://live.datatables.net/giharaka/1/edit
http://live.datatables.net/saqozowe/3/edit

Kevin

RoloTomasi

Hi Kevin,
thanks for your reply.
Concerning to this code I have to wave the wite flag. http://live.datatables.net/saqozowe/3/edit. Sorry, I don't understand this javascript and I'm not able to build in this in my javascript-code. I'm not a coder.
I realized that you used 2 thead. How would you alter the code underneath to change the first row to the multi_filter_select in order to search for data and the second row as the real head and in order to sort data?
https://jsfiddle.net/RoloTomasi/Lr3p6gab/1
Maybe you or anybody else can help me one more time.

Thanks in advance
Rolo

kthorngren

Use the tr:eq(0) selector for the loop to build the inputs:
$('#example thead tr:eq(0) th').each( function () {

You will want to model your code after the first example: http://live.datatables.net/giharaka/1/edit

I took the code from that example and replaced your code. Changed the selector to tr:eq(0) as mentioned above and assigned the variable table to the API in line 2, for example: var table = $('#example').DataTable({.

Also you had two thead tags in your HTML. You only want one. Here is your updated fiddle:
https://jsfiddle.net/udx1q4mk/

Kevin

RoloTomasi

Actually I was heading for the multifilterselect
(https://datatables.net/examples/api/multi_filter_select.html)
But surely this one could help me in other tables.
Nevertheless it wolud be nice, if someone can change the updated fiddle (https://jsfiddle.net/udx1q4mk/) for the multifilterselect.
Thanks in advance

kthorngren

Its the same answer as before. Take the example ( http://live.datatables.net/saqozowe/3/edit ) and change the selector to to use tr:eq(0) instead of tr:eq(1).

https://jsfiddle.net/6a98u3fq/1/

Kevin