CODEWITHSUNDEEP
jqueryeventsdatatables
Pouria Moosavi
Pouria Moosavi

Reputation: 730

Remove default Jquery Datatable search event and add custome event

I am using Jquery Data-table and my table has server-side process, because of that I'm willing to turn default search action (which sends a request per key-up) off and use my own action.
I tried these things but none work:

table.search( '' );

table.one( 'search.dt', function (event) { //my action here})

table.off('search.dt')
table.off('search')

$('my_table_selector').removeEventListener('search')
$('my_table_selector').removeEventListener('search.dt')
$('my_table_selector').unbind('search')
$('my_table_selector').unbind('search')

table.on( 'search.dt', function (event) {
  event.preventDefault();
  event.stopPropagation();
  event.stopImmediatePropagation();
})

I understand that js does not overwrite listeners.
Could you please help me to overwrite data-table search action with my own action?
Thanks in advance.

Upvotes: 0

Views: 1163

Answers (1)

andrewJames
andrewJames

Reputation: 21910

If your datatable's ID is "example", then assign it to a variable when you initialize it:

var table = $('#example').DataTable({
  // usual config in here
});

Then use something like this to redefine the related search box event:

$('#example_filter input').off().blur(function () {
  // your logic in here, for example:
  //table.search(this.value).draw();
});

In my example, I used blur (which fires when the search box loses focus), but you can replace that with whatever you need.

Note that my selector '#example_filter input' is based on the standard values provided by DataTables, together with the table ID. Unless you have customized the DataTable default classes, that approach should work.

Upvotes: 1

Related Questions