Angular datatable search filter on "search" press

Question

I am using server side processing with angular datatable. Is there anyway to turn off auto filtering in the search box and make it to search/filter (ajax call to server side) only when search button is click. Hope someone experience in angular datatable can help.

Answer 1

You can do this in 4 steps :

• unbind all event handlers associated with the default search box
• add a new search button next to the search box
• include a DataTable directive instance (dtInstance)
• perform search via dtInstance when the new search button is clicked

Use the initComplete callback to make the modifications, example :

$scope.dtOptions = DTOptionsBuilder.newOptions()
  //other options 
  .withOption('initComplete', function() {
     $('.dataTables_filter input').unbind();
     $('<button/>').text('search').attr('id', 'new-search').appendTo('.dataTables_filter');
     $('#new-search').on('click', function() { 
       $scope.dtInstance.DataTable.search($('.dataTables_filter input').val()).draw();
     })  
   })

Include the directive instance

$scope.dtInstance = {};

<table datatable dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance" >

demo -> http://plnkr.co/edit/afMNeuUbwolGPffTdson?p=preview