4

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

user3734830
  • 53
  • 1
  • 4
  • Please add some meaningful code and a problem description here. For more help, see http://stackoverflow.com/help/mcve – Steve Jun 12 '14 at 18:10

2 Answers2

13

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/

markpsmith
  • 4,860
  • 2
  • 33
  • 62
  • Yes, working. Can you tell me how to add a button just beside the search box? – Half Blood Prince May 18 '16 at 06:31
  • 1
    @HalfBloodPrince this will add a search button to the right of the input. $('div.dataTables_filter label').append(''); If you do this don't forget to change the selector for the onClick function to be '#exampleDataSearchButton' instead of '#filter'. I also got rid of the 'Search:' text on the left of the input by using: $("div.dataTables_filter label").html($("div.dataTables_filter label").html().split("Search:").join("")) – kaelle Sep 23 '16 at 18:29
4

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();
            }
        });
Hasson
  • 1,894
  • 1
  • 21
  • 25
  • 2
    This answer is misleading. `fnFilter` DOES work with server-side processing, but it is v1.9 syntax. `search()` is the correct v1.10 syntax, but that's not what you said. – markpsmith Mar 14 '16 at 14:38