Trying to replicate Nested tables example, getting iCorrector is undefined
Trying to replicate Nested tables example, getting iCorrector is undefined
arniec
Posts: 2Questions: 0Answers: 0
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
[code]
TypeError: nThs[i - iCorrector] is undefined
http://datatables.net/download/build/jquery.dataTables.nightly.js
Line 3654
[/code]
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
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- script type="text/javascript" language="javascript" src="inc/DataTables-1.9.4/media/js/jquery.dataTables.js">
div.innerDetails { display: none }
Rendering engine
Browser
CSS grade
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": ''
},
{ "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 =
'' +
'' +
'Rendering engine:' + oData.engine + '' +
'Browser:' + oData.browser + '' +
'Platform:' + oData.platform + '' +
'Version:' + oData.version + '' +
'Grade:' + oData.grade + '' +
'' +
'';
return sOut;
}
[/code]
Then the source file objects.txt is
[code]
{ "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" }
] }
[/code]
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
[code]
TypeError: nThs[i - iCorrector] is undefined
http://datatables.net/download/build/jquery.dataTables.nightly.js
Line 3654
[/code]
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
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- script type="text/javascript" language="javascript" src="inc/DataTables-1.9.4/media/js/jquery.dataTables.js">
div.innerDetails { display: none }
Rendering engine
Browser
CSS grade
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": ''
},
{ "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 =
'' +
'' +
'Rendering engine:' + oData.engine + '' +
'Browser:' + oData.browser + '' +
'Platform:' + oData.platform + '' +
'Version:' + oData.version + '' +
'Grade:' + oData.grade + '' +
'' +
'';
return sOut;
}
[/code]
Then the source file objects.txt is
[code]
{ "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" }
] }
[/code]
Any help would be greatly appreciated; I've been hacking at this code for a few hours to no avail
This discussion has been closed.
Replies