Adding individual search(input) changes column widths (added testcase)

AndersHP

EDIT Added testcase
http://live.datatables.net/sunudadi/1/edit?html,css,js,output
(only think i changed was pasting the JS from the example)

I want individual search, but when using the example code, the width of all columns are changed to equal widths. When i use the standard zero config setup, the columns size are fitting the content.

I use jquery 1.8.2. What could be wrong?

Below is the initializing code that adds the weird behavior.

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $('#example thead th').eq( $(this).index() ).text();
        $(this).html( '<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', function () {
            that
                .search( this.value )
                .draw();
        } );
    } );
} );

allan

Sounds like you want to add:

tfoot input {
  width: 100%;
}

to your CSS.

Updated example: http://live.datatables.net/sunudadi/3/edit .

Allan