Column filter example along with table header

Akashvino

Hi All,

Request your help, if we change (tfoot -> thead) and (footer -> header) in the example provided in this link **https://datatables.net/examples/api/multi_filter.html** the table header get replaced by the input search box, so request you help on how to make this work in such a way that both are displayed table header + input box, Input box below table header.

colin

This thread should help, it's asking the same thing.

Cheers,

Colin

Akashvino

Hi Colin,

Thank you, We looked at the example "http://live.datatables.net/fozebaqo/1/edit" provided and as per this example the input search box is above the table header , but our requirement is such at the input search box should be below the table header, so we just tried the same in our code and we are able to get the input search box below the table header but the search functionality is not working, can you please help.

Code

$(document).ready(function() {
    var table = $('#example').DataTable();

    $('#example thead tr#filterboxrow th').each(function() {

        var title = $('#example thead tr#filterboxrow th').eq($(this).index()).text();

        $('#example thead').append($(this).html('<input id="input' + $(this).index() + '" type="text" class="form-control" placeholder="filter by ' + title + '" />')
            .css('padding-left', '4px'));

        $(this).on('keyup change', function() {
            table.column($(this).index()).search($('#input' + $(this).index()).val()).draw();
        });
    });

});

kthorngren

There are lots of threads on the forum like this one that discusses placing select inputs in the second header for column searching.

Kevin

Akashvino

Hi Kevin,

Thank you, the example which you provide does not satisfy our requirement, our requirement is a individual column search and the search input box must be below the header for each column like this http://live.datatables.net/fozebaqo/2/edit.

kthorngren

There are lots of threads regarding using text inputs in the header too. Here is the example I provide when answering the threads:
http://live.datatables.net/giharaka/1/edit

Kevin