Individual column searching in header

Yves HEBERT

I'm using this code for have individual column searching in header :

$(document).ready( function () {
    // Setup - add a text input to each header cell with header name
    $('#example thead th').each( function () {
        var title = $(this).text();
        $(this).html( title+'<br><input type="text" placeholder="Search '+title+'" />' );
    } );
    // DataTable
    var table = $('#example').DataTable();
    // Apply the search
    table.columns().every( function () {
        var that = this;
        $( 'input', this.footer() ).on( 'keyup change clear', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );

But when I click on a search field, the order of the column changes.
How can I disable this event when I click on <input type = "text" /> and keep the sort event if I click the name of the column (which is in the same cell)?

Thanks for your help.

colin

Hi @Yves HEBERT ,

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

Cheers,

Colin

Yves HEBERT

Thank you for your quick reply

shaleenyadav

@colin How to limit the text input to selected columns?
$('#OpptyTable tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );

kthorngren

You can assign a class to each column to search. Here is an example:
http://live.datatables.net/vuruhosa/1/edit

Kevin

shaleenyadav

@kthorngren Awesome!! That is exactly I was looking for. I am just new to HTML/JScript so I am having some trouble figuring this out.
Do you also know how to mix and match input text and select lists?
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );

            column.data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );

kthorngren

You would use one class for the text inputs to loop through and another for the select lists. Don't try to combine the loops just use modify the two to use different classes.

Kevin

colin

This example here has both select lists and input elements to filter - you just need to combine the two examples.

Cheers,

Colin