How to kill previous AJAX calls in DataTables

Question

Ok i have a function like

So when this function is called the AJAX request is made but if I again call the same function. The current request is made but the previous call is not killed. I want the datatable to kill any previous calls and run only the latest one.

I'm not sure how to do this.

score 8 · Answer 1 · answered Apr 16 '18 at 14:21

8

This is how I do it with DataTables 1.10.16

var table = $('#table').DataTable({
    ajax: {
        url: '/datatable',
        type: 'POST',
        beforeSend: function() {
            if (table.hasOwnProperty('settings')) {
                table.settings()[0].jqXHR.abort();
            }
        }
    }
});

answered Apr 16 '18 at 14:21

Abdul Manaf Saparuddin

319
4
5

1

i am getting an error: 'Cannot read property 'hasOwnProperty' of undefined' – Mehmood Memon Dec 31 '19 at 04:48
3

@MehmoodMemon try to replace line 6 with this: if (table && table.hasOwnProperty('settings')) { – Abdul Manaf Saparuddin Jan 01 '20 at 07:17
1

This also removes "Processing..." dialog after aborting previous request. You need to add ``$('#DataTables_Table_0_processing').show();`` after 7 line – rohitcoder Sep 28 '20 at 07:53

score 3 · Answer 2 · answered Jun 07 '19 at 13:46

It might help someone

        preDrawCallback: function(settings) {
            if ($.fn.DataTable.isDataTable('#table')) {
                var dt = $('#table').DataTable();

                //Abort previous ajax request if it is still in process.
                var settings = dt.settings();
                if (settings[0].jqXHR) {
                    settings[0].jqXHR.abort();
                }
            }
        }

score 2 · Answer 3 · answered Oct 11 '17 at 23:49

2

The following worked for me...

var elTable = jQuery('table#myDataTable');
var oTable = elTable.DataTable();
oTable.context[0].jqXHR.abort()

answered Oct 11 '17 at 23:49

ScottyG

3,204
3
32
42

score 1 · Answer 4 · edited May 23 '17 at 12:25

I think these threads will be helpful:

Abort previous ajax call in datatables 1.10

How can I stop all the currently ongoing Ajax queries that DataTables instance have started?

It looks like you could add something like this to the first line of your function:

function load(id) {
    if($('#videos_list').DataTable().settings.jqXHR) {
        $('#videos_list').DataTable().settings.jqXHR.abort()
    }
    $("#table_wrapper").mask("");
    etc...

score 1 · Answer 5 · answered Feb 16 '21 at 09:43

I have Datatable 1.10.5 . Its worked.

           if ($.fn.DataTable.isDataTable('#table')) {
               var dt = $('#table').DataTable();

               //Abort previous ajax request if it is still in process.
               var settings = dt.settings();
               if (settings[0].jqXHR) {
                   settings[0].jqXHR.abort();
               }
           }
       }

I also did the call delay as follows.

       var $searchBox = $(tableId + "_filter input[type='search']");
       $searchBox.off();

       var searchDebouncedFn = debounce(function () {
           $(tableId).DataTable().search($searchBox.val()).draw();
       }, 300);

       $searchBox.on("keyup", searchDebouncedFn);
   }

   /* from https://davidwalsh.name/javascript-debounce-function */
   function debounce(func, wait, immediate) {
       var timeout;
       return function () {
           var context = this, args = arguments;
           var later = function () {
               timeout = null;
               if (!immediate) func.apply(context, args);
           };
           var callNow = immediate && !timeout;
           clearTimeout(timeout);
           timeout = setTimeout(later, wait);
           if (callNow) func.apply(context, args);
       };
   };

   debounceSearch('#table') ```

How to kill previous AJAX calls in DataTables

5 Answers5