How to abort running ajax call if new request found

tejareddy.423

Hi I am using Datatables 1.10.13
i have a situation here, how to cancel old request on server side scripting.
while value entered in text field I need to call a function which contains Datatables.

Can any one explain how to achieve it?

bindrid

once the request is made, you can't cancel it but you can ignore it. But do you really need to?

Assuming you mean with serverSide:true, the "draw" value (providing you are setting it in your response from your request on the server side, will keep the transactions in sync to ensure that the second requests does not get written over the first if the come back out of order.

tejareddy.423

Yes I am using serverSide:true
I have a typical situation here.

onblur of input field I am calling Datatable function (with the value from input field I need to form query)

so on every char entered its calling Datatables and getting the response,

if I entered 10char I don't need 10 success responses, and it is load/time consumption in my case

I saw for ajax abort code

currentRequest = jQuery.ajax({
type: 'POST',
data: 'search_text=' + text,
url: 'AJAX_URL',
beforeSend : function() {
if(currentRequest != null) {
currentRequest.abort();
}
},
success: function(data) {
jQuery('#data').html(data).show();
}
});

But I don't know how to use it in Datatables

bindrid

I fixed that in my code by removing the handler off the search boxes and replacing it with my own.
It has an added button and watches for the enter key (so two ways to start a search)

// I use the preInit.dt event handler to change the event handlers around
    $("#example").one("preInit.dt", function(){
        // remove the current handler.
        $(".dataTables_filter input[type='search']").off();
        

       
          // replace the current search with bootstrap styled search
          $(".dataTables_filter").html(
              '<div style="width:320px" class="input-group">' +
              '<input type="search" class="form-control" placeholder="Search for...">' +
              '<span class="input-group-btn">' +
              '<button class="btn btn-primary" type="button">' +
              '<i class="fa fa-search fa-xs"></i></button>'+
              '</span>' +
              '</div>'
          );
          // set variable for ease below
          var sbox =  $(".dataTables_filter input[type='search']")

        // button event handler
        $(".dataTables_filter button").on("click", function(){
            $("#example").DataTable().search(sbox.val()).draw();
        });
        
        // Enter key  handler 
        sbox.on("keydown", function(evtObj){
            if(evtObj.keyCode == 13){
                $("#example").DataTable().search(sbox.val()).draw();
            }
        });
        
    });

tejareddy.423

Thanks for your help @bindrid
I think I didn't explain it properly

My requirement is not filtering the table
my input field is independent, but depends up on text in the field need to construct query and datatable

my problem is just abort the running once it any new request