datatables disable auto filter and added a button

Question

I'm using datatables plugin and i would like to disable the auto filter on the table and instead put a search button when they've fully entered their text and are ready to search further.

JSfiddle :

$(document).ready(function() {
    $('#example').dataTable();
} );

http://jsfiddle.net/84KNZ/

the button (href) is "Go filter"

any idea ?

thanks

Answer 1

First thing to do is unbind the default keyup event from the search input:

$("div.dataTables_filter input").unbind();

Then we need to call the datatable filtering from the link click event:

 $('#filter').click(function(e){
        oTable.fnFilter($("div.dataTables_filter input").val());
    });

http://jsfiddle.net/84KNZ/3/

Answer 2

If you are using server side processing, fnFilter do not work, you have to use search, also, it will be better to perform the search by pressing Enter in the search textbox, this can be achieved as follows:

        $("div.dataTables_filter input").unbind();

        $("div.dataTables_filter input").on('keydown', function(e) {
            if (e.which == 13) {
                table.search( $("div.dataTables_filter input").val()).draw();
            }
        });