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.

Answer 1

You better use fnInitComplete:

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

Answer 2

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.