How can I place "filtering input" in tfoot?

markzzz

This is the table layout I have:

<table id="grid" class="table table-hover table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
    <thead></thead>
    <tbody></tbody>
    <tfoot>
        <tr>
            <th colspan="8"></th>
            <th></th>
            <th></th>
        </tr>
    </tfoot>
</table>

And I set datatable dom property in this way:

dom: '<"dataTables_customToolbarWrapper">frtlip',

How can I place the filtering input in the first th of tfoot? i.e. within <th colspan="8"></th>

Thanks

colin

Hi @markzzz ,

The dom determines where the table's control elements go, but they're not part of the table like the <tfoot>.

You would need to use either jQuery or the API commands, such as

$(table.column(0).footer()).html('Fred');

as in this example,

Cheers,

Colin

markzzz

I see. But how Can I move the search box in that Place? Or I need to create my own and remove the "f" from the dom property? And how can I use it ad search filter again?

colin

Hi @markzzz ,

The dom property won't do anything for you here. But, this example here should help - there's a combination of input elements and dropdowns in the footer cells.

Cheers,

Colin