need to add a column filter delay

miked

Upgraded to 1.11, and my old column filtering stratagies are not working any longer, what is the best practice for adding a column filter delay in, we're having trouble with the ajax queries not returning since there are so many queries stacked up because of the lack of a delay in place. With over 11m mysql records in play, searching string fields with wildcards creates situations where things are not as optimized as they might be

Also, I'm seeing that even the shift, ctrl, and alt key fires the column filter.

All the searching for column filter delays and pauses returns results from 2009 to 2011. Suggestions for adding column filters with latest API version?

daniel_r

You can use the filter_delay property of my yadcf plugin , you can see it in action for the last column in the following showcase page http://yadcf-showcase.appspot.com/server_side_source.html , just reset all filters (click the X button) because that page is loaded pre filtered (for the demonstration)

miked

@daniel_r thanks for the link to the plugin, but I'd rather not use a plug in for something that seems like it should be do-able via a simple property/param/method or the like

allan

Upgraded to 1.11

Nicely done. Can I get a copy :-). I suspect you mean 1.10 ;-)

DataTables doesn't have any column filtering inputs in the core - you can filter via the API, but to get an input you need to draw an input box on the page. So presumably you are called column().search() somewhere, or the old fnFilter method.

If you don't want to use Daniel's excellent plug-in you could use the $.fn.dataTable.util.throttle() helper to do your own throttling when you call the API.

Allan

miked

Nicely done. Can I get a copy :-). I suspect you mean 1.10 ;-)

so my application to the early adopter program has been denied?? d*mmit.... But suspicions are correct.

Yes, using API (DataTable) using column().search()

unable to format the snippet

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

allan

Using $.fn.dataTable.util.throttle():

table.columns().eq( 0 ).each( function ( colIdx ) {
    var search = $.fn.dataTable.util.throttle( function ( val ) {
        table
            .column( colIdx )
            .search( val )
            .draw();
    } );

    $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
        search( this.value );
    });
});

Allan

miked

I went with a solution using the Enter key vs trying to figure out how long the user had actually delayed/"are they done?" before firing the query. The other issue with the delay is that if the user cut and pastes the seach string then 2 ajax calls are made for server side lookup - one off the ctrl key press as part of ctrl-V, and one off the entered text in the form input field. That's a performance hit I can't take right now with 12M records and growing in my table, tough on wildcard string lookup return times. So Enter key.

Enter key solution:

    table.columns().eq( 0 ).each( function ( colIdx ) {
        $('input', table.column( colIdx ).footer() ).on('keyup change', function (e) {
        if (e.which == 13) {
            table
                .column( colIdx )
                .search( this.value )
                .draw();
        }
        });
    });

Looks like one could drop the on(change) portion and just trigger off of keyup

eta: what am I messing up that is preventing the code snippet from displaying properly?