Callback function that can be used after datatable has been created and loaded with data

bioluminescence

Hi,

I am using the latest version of the 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:

[code]
$('#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');
[/code]

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:

[code]
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');
[/code]

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?

Thanks

bioluminescence

I managed to use fnDrawCallback. This worked well for me irrespective if I use data from a JavaScript array or data coming from an Ajax call:

[code]
$('#example').dataTable({
"fnDrawCallback": function (oSettings) {
alert( 'DataTables has redrawn the table' );
}
});
[/code]

allan

There are a number of options for this - you might want to consider also fnInitComplete which will fire only once in a table's lifetime - and fires once the data has been loaded. The alternatives are to use events: http://datatables.net/docs/DataTables/1.9.1/DataTable.html#summary_events - you could listen for 'xhr' for example which will fire when the data has been loaded.

Allan

bioluminescence

I am having overflow issues in IE8. So what I want to do is to have the datatable loaded with data and then set the overflow to auto. I did try to set it before the datatable is loaded but then it didn't work. So the only other option is to set it just after the datatable is loaded with data. Like this:

[code]
.overflow-fix
{
overflow: auto;
}
[/code]

Using my first configuration I just added the following:

[code]

"fnDrawCallback": function (oSettings) {
if (navigator.userAgent.toString().indexOf('MSIE') >= 0) {
// This fixes the IE8 overflow issue. Style is added after the datatable has been drawn.
$('#main').addClass('overflow-fix');
}
}

[/code]

This comes from my initial post here:
http://datatables.net/forums/discussion/comment/35607#Comment_35607

Would you have done it like this as well or would you recommend somethin else?

#main contains the main content of my website. The datatable is in this div.