cannot get my datatables drill down to work

cannot get my datatables drill down to work

$(document).ready(function () {
var anOpen = [];
var oTable = $('#table_id').dataTable();
$('#table_id tbody').on('click', 'tr', function (e) {
var nTr = this.parentNode;
var i = $.inArray(nTr, anOpen);
console.log("clicked|" + i);
if (i == -1) {
var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr),
'details');
$('div.innerDetails', nDetailsRow).slideDown();
anOpen.push(nTr);
console.log("open");
}
else {
oTable.fnClose( nTr );
anOpen.splice( i, 1 );
console.log("closed");
}
});
function fnFormatDetails(oTable, nTr) {
var oData = oTable.fnGetData(nTr);
var sOut =
'<div class="innerDetails">' +
'<table cellpadding="5" cellspacing="0" border="0"
style="padding-left:50px;">' +
'<tr><td>Rendering engine:</td><td>' + 'hi' + '</td></tr>' +
'<tr><td>Browser:</td><td>' + 'hi' + '</td></tr>' +
'<tr><td>Platform:</td><td>' + 'hi' + '</td></tr>' +
'<tr><td>Version:</td><td>' + 'hi' + '</td></tr>' +
'<tr><td>Grade:</td><td>' + 'hi' + '</td></tr>' +
'</table>' +
'</div>';
return sOut;
}
Just gave a section of it, When i click on the row it does trigger the if
(i==-1) and then when i click again it triggers the else and works back
and forth the problem is that i cannot get anything to display. The table
just sits and new opens another table below it like it should. No errors
in the console just the proper console logs.