Best way to place footer(filter) bellow header?

edwardc

I want to use filters in footer but, because it is a long table, I want filters to be right bellow header, so something like:

<thead>
...
</thead>

<tfoot>
...
<tfoot>

<tbody>
...
...
...
</tbody>

How can I do this? I tried with DOM but could not find the footer as a distinctive element, only "table". Any tips?

F12Magic

Since you already have jquery loaded, you can use a jquery selector. Your dataTable should have a unique id so you could use something like (simplified):

var footer = $('#tableID tfoot');

For more details, look at the comments(7) tab on this examples API page: Individual column searching (text inputs)

allan

The order of the HTML doesn't effect where the footer it shown. In fact, HTML standards require that the order be as you have shown - header, footer then body. The browser will put the tfoot at the footer of the table.

You have two options:

1. Use CSS to make the footer a header: table tfoot { display: table-header-group; }. That can mess some of DataTables extensions up though (FixedColumns and FixedHeader struggle with this).
2. Just have two tr rows in your thead.

Allan

edwardc

I end up with a mix of code that fixed other problem also: flickering in x scrolling.

Using the exemple from here I changed the code to:

.appendTo($(column.header()).empty())

(where <b>.header</b> is the main idea) and added another row with td in header.
Works like charm and I got a great secondary effect: filtering columns now also triggers a sorting. I consider this a feature not a bug (sounds like Bill Gates a bit, I know).

edwardc

Strike last comment.

$('#myID tfoot tr').appendTo('#myID thead');

works like charm when there is no scrollX enabled.

@allan : any idea how can I attach the filter to the second row in thead? I can not manage to retrieve it so both sort and filter attach to the same column witch is terrible.
Playing with "orderCellsTop" was not successful either as it only change the default row to attach both listeners.

allan

any idea how can I attach the filter to the second row in thead?

You need to modify whatever the selector is that you are using. thead tr:eq(1) will select the second row in thead for example.

Allan

klukiyan

@allan , @edwardc
Hi,
Thank you for this discussion it almost helped. Though I wasn't happy that when clicking on the filter dropdown, the SORT arrows are also clicked.
I've also tried to make the 2 tr in header. But then both the filtters and sorts went into seconds row. So it wasn't a solution either

Can you please explain me how you did it, and where should I put the thead tr:eq(1) entry mentioned? what does it do?

Meanwhile I ended using the CSS trick that puts the footer into header group, and it's almosts almost what I needed.

    <style>
        /* placing the footer on top */
        tfoot {
            display: table-header-group;
        }}
    </style>

kthorngren

See if this example helps:
http://live.datatables.net/giharaka/1/edit

Kevin