Can I move the search footer input to the top..

Th0r

Hello again,

I have a new rather small issue I believe.. I need to use the scrollX: true, but it messed up my search fields.
Looking into the most simple example of the search input, I still dont understand it fully.

The HTML contains a THEAD and TFOOT. The THEAD contains the colum title is is searchable.
The TFOOT contains the actual search input. Boths works perfect.
THE INPUT is located at the bottom of the table.

If I change the code to THEAD the input goes up, but header disappears and the input makes it sortable.

$('#example thead th').each( function ()
{
var title = $('#example thead th').eq( $(this).index() ).text();
$(this).html( '<input id="'+title+'" type="text" placeholder="Search '+title+'" />' );
} );

How can I move the input fields (from the TFOOT) to they are in the top, just under the column titles, instead of at the bottom?

https://live.datatables.net/tiyuheni/1/edit?js,output

Is is it something about the table().header()?

Can anyone send me in the right direction?

Regards Thor

Th0r

I found the "display: table-row-group;", which helped me out.

Th0r

Hm, it didnt work as just stated.
When adding the "scrollX: true" the footer stays as footer in the buttom...

Any suggestions?

kthorngren

Try this example which should work with the scrolling features.

Kevin

Th0r

Many thanks Kevin,

works perfect.

This is just great!

Thanks