How to determine when jQuery datatable is created and loaded with data

Question

I am using the latest version of the jQuery datatables. Is there a callback function that I can use just after the data has been loaded and displayed in the datatable?

I have a datatable that I am experimenting with in IE8. I have 2 sets of data that I am testing with (of which I just use one at a time). I have a JavaScript array and a set of data that I get from an Ajax call. I am using ASP.NET MVC 3.

Configuration that gets its data from an Ajax call:

$('#banks-datatable').dataTable({
     "bProcessing": true,
     "sAjaxSource": '/Administration/Bank/List',
     "aoColumns": [
          { "sTitle": "Engine" },
          { "sTitle": "Browser" },
          { "sTitle": "Platform" },
          { "sTitle": "Version" },
          { "sTitle": "Grade" }
     ],
     "bAutoWidth": false,
     "bFilter": false,
     "bLengthChange": false,
     "iDisplayLength": 10
});

alert('test');

When my datatable is loaded this way the datatable is created (with no data) and the processing box displays and the alert popup displays. At this point the datatable is there but no data has been loaded into the datatable. Only when the popup goes away (when I click the Ok button on the popup) then the data is loaded into the datatable. Why is this?

Configuration that gets its data from a JavaScript array:

var aDataSet = [
     ['Trident', 'Internet Explorer 4.0', 'Win 95+', '4', 'X'],
     ['Trident', 'Internet Explorer 5.0', 'Win 95+', '5', 'C'],
     ['Trident', 'Internet Explorer 5.5', 'Win 95+', '5.5', 'A'],
     ['Trident', 'Internet Explorer 6', 'Win 98+', '6', 'A'],
     ['Trident', 'Internet Explorer 7', 'Win XP SP2+', '7', 'A'],
     ['Trident', 'AOL browser (AOL desktop)', 'Win XP', '6', 'A'],
     ['Gecko', 'Firefox 1.0', 'Win 98+ / OSX.2+', '1.7', 'A']
];

$('#banks-datatable').dataTable({
     "aoColumns": [
          { "sTitle": "Engine" },
          { "sTitle": "Browser" },
          { "sTitle": "Platform" },
          { "sTitle": "Version" },
          { "sTitle": "Grade" }
     ],
     "bAutoWidth": false,
     "bFilter": false,
     "bLengthChange": false,
     "iDisplayLength": 10,
     "aaData": aDataSet
});

alert('test');

The datatable is created and data is loaded and then only does the popup display. This is different to the first scenario. Why is this the case?

If I go with the first scenario, is there a way that I can determine when the datatable has been created and loaded with data?

With this check I would like it to be general so that it can be used what ever way I decide to load it with data.

No not yet, but is there a more general one that I can use irrespective if it gets its data from an Ajax call or just a plain JavaScript array? — Brendan Vogt, Jun 13 '12 at 14:54
yes, you are right, it retrieves the data from an array, you can try [`promise()`](http://api.jquery.com/promise/) and `done()` methods. — Ram, Jun 13 '12 at 14:58

score 27 · Answer 1 · edited Jan 09 '14 at 12:38

27

You better use fnInitComplete:

$(document).ready(function () {
    $('#example').dataTable({
        "fnInitComplete": function (oSettings, json) {
            alert('DataTables has finished its initialisation.');
        }
    });
})

edited Jan 09 '14 at 12:38

Rafael Herscovici

16,558
19
65
93

answered Jul 04 '13 at 17:06

Xdg

1,735
2
27
42

Thanks, just what I needed to capture when the AJAX data had been retrieved and the GUI updated. – 1DMF Jul 14 '14 at 11:17
A new version of DataTables 1.10 has been released with a slightly changed API. Callback list: http://datatables.net/reference/option/ – Xdg Jul 14 '14 at 12:50
1

There is a backwards compatibility but new API has been cleaned up. It's up to you what you use:) https://datatables.net/upgrade/1.10 – Xdg Jul 14 '14 at 16:06
Instead of posting a link to page with a plethora of stuff, any chance you could explain exactly what has changed and what it has been replaced with, because so far I don't what you are trying to explain, all I know is the above works and you have yet to provide an alternative. – 1DMF Jul 14 '14 at 16:12
I say only that you should update your code to the new API - change fnInitComplete to http://datatables.net/reference/option/initComplete . – Xdg Jul 14 '14 at 19:05
1

Sorry for the delay in coming back to thank you Xdg, some troll took away my reputation and I have only just earned enough to be able to comment again. Your suggested change was quick and painless and works perfectly. Again my sincerest gratitude for taking the time to explain your original comment, it is very much appreciated. – 1DMF Jul 25 '14 at 11:22
This is the perfect method to execute other function once datatable is loaded at first. (y) – Smile Oct 08 '15 at 11:42
The callback does not function on sorting, searching (filtering) and paging (which is not meant for). – Tiny Jun 10 '16 at 19:02
@Tiny: For that can be used draw callback - https://datatables.net/reference/option/drawCallback – Xdg Feb 01 '17 at 16:26

score 20 · Accepted Answer · answered Jun 13 '12 at 15:34

20

You can use the fnDrawCallback function. It gets called every time the table is drawn. This would include when the table is loaded with data, sorted or filtered.

answered Jun 13 '12 at 15:34

Jason Towne

8,014
5
54
69

1

This worked for me. It calls this function irrespective if I use data coming from a JavaScript array or from an Ajax call. Thanks. – Brendan Vogt Jun 14 '12 at 05:39
However additional variable is needed if you only want the "onload" event. – Tomáš Zato Feb 16 '14 at 17:11

score 9 · Answer 3 · edited Jul 25 '18 at 06:42

9

On the new version of jQuery DataTable, the method is called: initComplete()

edited Jul 25 '18 at 06:42

Krzysztof Janiszewski

3,763
3
18
38

answered Nov 25 '15 at 13:50

Drako

769
1
8
23

Perfect! I was trying to fire off a function to populate badges attached to tabs holding specific datatables and kept getting zero counts, as code was firing before all the data was retrieved (from server side ajax). This call delayed that function call until all the data was back. – ScottLenart Dec 28 '15 at 15:11

score 5 · Answer 4 · answered Dec 11 '18 at 12:49

5

Datatable provides InitComplete option. You can use it. May be that will help

$('#example').DataTable({
  "initComplete": function(){
    alert('Data loaded successfully');
  }
});

Link -> https://datatables.net/reference/option/initComplete

answered Dec 11 '18 at 12:49

Junaid Nazir

173
1
11

score 2 · Answer 5 · edited Jul 26 '18 at 05:56

I've always known javascript to be single threaded. Here is a post to support that:

Is JavaScript guaranteed to be single-threaded?

In the first scenario you are getting data from the server, and then holding up the thread with an alert box. In the second scenario you pre-populate data. I believe that is the difference.

This page shows how to call a callback on success:

 // POST data to server
 $(document).ready(function() {
   $('#example').dataTable( {
     "bProcessing": true,
     "bServerSide": true,
     "sAjaxSource": "xhr.php",
     "fnServerData": function ( sSource, aoData, fnCallback ) {
       $.ajax( {
         "dataType": 'json',
         "type": "POST",
         "url": sSource,
         "data": aoData,
         "success": fnCallback
       } );
     }
   } );
 } );

score 1 · Answer 6 · answered Aug 05 '14 at 15:47

You can also use dataSrc as remplacement for "success" since it should not be overloaded :

Here with the tipical exemple of datatables.net

var table = $('#example').DataTable( {
    "ajax": {
            "type" : "GET",
            "url" : "ajax.php",
            "dataSrc": function ( json ) {
                //Make your callback here.
                alert("Done!");
                return json.data;
                }       
            },
    "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }

        ]
    } );

How to determine when jQuery datatable is created and loaded with data

6 Answers6