DataTable initialization events fired before table loaded - datatables

Question

I have a page with a jQuery Datatable being from Ajax, and drawn with the npm treeGrid plugin. The table is drawn fine, but i'm trying to catch the end of the table loading to do some stuff (get additional data to be ready when the tree is expanded). The init.dt event or the initComplete option are fired before the table is drawn. If i put an alert in the event it is shown after the table top and bottom are drawn but before the data is rendered. And if i try to access the table data it is undefined.
Important: I get the same behavior if I remove the treeGrid object from the DataTable options. I even removed the treeGrid javascript...
So my question is: how can i have code run when everything is really ready?
Below are two implementations of the Datatble, with either init.dt or initComplete. I am also adding the columns object. Below are two screenshots of the alert and then the table drawn.
$(document).ready(function () {
$('#mainTable')
.on('init.dt', function () {
alert('Table initialisation complete')
})
.DataTable({
"ajax": '/API/RRate',
'treeGrid': {
'left': 20,
'expandIcon': '<span>+</span>',
'collapseIcon': '<span>-</span>'
},
"columns": columns
});
});
$(document).ready(function () {
$('#mainTable')
.DataTable({
"ajax": '/API/RRate',
'treeGrid': {
'left': 20,
'expandIcon': '<span>+</span>',
'collapseIcon': '<span>-</span>'
},
"columns": columns,
"initComplete": function (settings, json) {
alert('Table initialisation complete')
}
});
});
var columns = [
{
title: '',
target: 0,
className: 'treegrid-control',
data: function (item) {
if (item.children) {
return '<span>+</span>';
}
return '';
}
},
{
title: 'Name',
target: 1,
data: function (item) {
return item.name;
}
},
{
title: 'HeadCount',
target: 2,
data: function (item) {
return item.headCount;
}
},
{
title: 'Responded',
target: 3,
data: function (item) {
return item.responded;
}
},
{
title: 'Percentage',
target: 4,
data: function (item) {
return item.percentage;
}
},
{
title: 'InProcess',
target: 5,
data: function (item) {
return item.inProcess;
}
},
];

Answer 1

OK, i found how to do this:
function AfterLoad()
{
table.rows().each(function () {
console.log(this.cells(0));
var rowData = this.data();
console.log(rowData[0]);
});
}
$(document).ready(function () {
table = $('#mainTable')
.DataTable({
"ajax": '/API/RRate',
'treeGrid': {
'left': 20,
'expandIcon': '<span>+</span>',
'collapseIcon': '<span>-</span>'
},
"columns": columns,
"initComplete": function (settings, json) {
AfterLoad();
}
});
});