I am attempting to replicate the Nested Tables example posted on the blog at http://datatables.net/blog/Drill-down_rows but not having any luck.
The error I get from Firebug is
I have tried the 1.9 build and the nightly build of DataTables to no avail, but not sure what I am doing wrong.
The HTML code is
Then the source file objects.txt is
Any help would be greatly appreciated; I've been hacking at this code for a few hours to no avail
The error I get from Firebug is
TypeError: nThs[i - iCorrector] is undefined http://datatables.net/download/build/jquery.dataTables.nightly.js Line 3654
I have tried the 1.9 build and the nightly build of DataTables to no avail, but not sure what I am doing wrong.
The HTML code is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE> </TITLE>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>
<script src="inc/jquery-1.7.1.min.js"></script>
<!-- script type="text/javascript" language="javascript" src="inc/DataTables-1.9.4/media/js/jquery.dataTables.js"></script -->
<script class="jsbin" src="http://datatables.net/download/build/jquery.dataTables.nightly.js"></script>
<link rel="stylesheet" type="text/css" href="inc/jquery.dataTables_themeroller.css" />
<style>
div.innerDetails { display: none }
</style>
</HEAD>
<BODY bgColor=#ffffff>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody></tbody>
</table>
</BODY>
<script type="text/javascript" charset="utf-8">
var anOpen = [];
var sImageUrl;
var oTable;
$(document).ready(function () {
// $('table.example tr:odd').addClass('odd');
// $('table.example tr:even').addClass('even');
sImageUrl = ""; ///release-datatables/examples/examples_support/
oTable = $('#example').dataTable({
"bProcessing": true,
"sAjaxSource": "objects.txt",
"aoColumns": [
{
"mDataProp": null,
"sClass": "control center",
"sDefaultContent": '<img src="details_open.png">'
},
{ "mDataProp": "engine" },
{ "mDataProp": "browser" },
{ "mDataProp": "grade" }
]
});
});
//$("#example tr").hover(
// function () { $(this).find("td:not(:last-child)").addClass('hoverclass') },
// function () { $(this).find("td:not(:last-child)").removeClass('hoverclass') }
//);
$('#example td.control').live( 'click', function () {
var nTr = this.parentNode;
var i = $.inArray( nTr, anOpen );
if ( i === -1 ) {
$('img', this).attr( 'src', sImageUrl+"details_close.png" );
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
anOpen.push( nTr );
}
else {
$('img', this).attr( 'src', sImageUrl+"details_open.png" );
oTable.fnClose( nTr );
anOpen.splice( i, 1 );
}
} );
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>' + oData.engine + '</td></tr>' +
'<tr><td>Browser:</td><td>' + oData.browser + '</td></tr>' +
'<tr><td>Platform:</td><td>' + oData.platform + '</td></tr>' +
'<tr><td>Version:</td><td>' + oData.version + '</td></tr>' +
'<tr><td>Grade:</td><td>' + oData.grade + '</td></tr>' +
'</table>' +
'</div>';
return sOut;
}
</script>
</HTML>
Then the source file objects.txt is
{ "aaData": [
{ "engine": "Trident",
"browser": "Internet Explorer 4.0",
"platform": "Win 95+",
"version": "4",
"grade": "X"
},
{
"engine": "Trident",
"browser": "Internet Explorer 5.0",
"platform": "Win 95+",
"version": "5",
"grade": "C" }
] }
Any help would be greatly appreciated; I've been hacking at this code for a few hours to no avail