Examples 'Individual column searching' fail if table source is Ajax, wait for table initialization!!

Anton

I've been struggling with this for some hours.
If you use an Ajax source for your table, the examples of 'Individual column searching' won't work, because they try to assign events to a table footer that doesn't exist yet, so "table.column( colIdx ).footer()" is null, and the event is then assigned to every input in the page. You can imagine how crazy I was, when every time I pressed a key tens of request were been made to the server!

So it's better to correct the example, using the option initComplete of table:

`initComplete: afterTableInitialization ...

And putting the code into a function:

function afterTableInitialization() {
    // Apply the search
    table.columns().eq( 0 ).each( function ( colIdx ) {
        $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
            table
                .column( colIdx )
                .search( this.value )
                .draw();
        } );
    } );
}

Maybe this would help anybody.

pike

Hi Anton,

I think I've a quite similar problem, using the individual column search with an Ajax source.
My code:

$("#result-table thead tr .search").each( function ( col ) {
var select = $('<select><option value=""></option></select>')
.appendTo( $(this).empty() )
.on( 'change', function () {
myTable.column( col )
.search( $(this).val() )
.draw();
console.log($(this).val());
} );
myTable.column( col ).data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );

The console.log logs the value I selected using the dropdown, but the table is not filtered. Any idea where the problem could be?

Thanks!

Anton

I don't see much relationship, your problem is with search API, which I don't know. Try opening a question. If the log value is correct, check 'col' value also. Look for correct using of search API. Sorry.