Drill Down Column Values "Undefined"

johnsonmeb

Hello,

I am a rank beginner programmer and have been using Datatables as a learning tool (thanks to the kind developers, blogs and forums!).

I have successfully made a table using this plugin which has worked without problem up to this point.

Using the tutorial on this website as a guide, I recently added drill-down rows. These drill-down rows also work without problem with the exception that the values for the respective fields in the drill-down area are returning as "undefined".

There is no problem with the data acquisition and display in the fields of the main table, only in the drill-down part.

I believe the reason for this may involve incompatible syntax based on the way I have the table set up as opposed to that given in the drill-down website example which appears to get the corresponding data as an object. (see sample line below for one of the drill-down columns)

'Visit Type:'+oData.encountertype+''+

Most of the examples given for the various features for the table on the website seem to involve the data in the form of an array of objects (i.e. an associative array with index and value).

My data is obtained via AJAX from a php file that queries a mysql database and is presented to the table as a JSON encoded array of arrays. This data has been validated to be in the correct format and work fine for the main table part (See sample output below)


{
"aaData": [
[
"Pending",
"13:00",
"Jack",
"Smithson",
"05-01-1956",
"Johnson",
"Consult - Initial",
"Hives",
"Medicare",
"Deductible For Everything; Then CI%",
"",
"7500.00",
"10",
"AARP",
"Deductible/CI%, Then Pays All After Primary Insurance",
"",
"100.00",
"10",
"",
"7500.00",
"",
"",
"",
"500.00"
]
]
}


I have used aoColumns and mData in the initialization portion of the table to set up the first column as a null placeholder for the drill-down 'open' image. The remaining columns correspond to the columns sequentially derived from the database query (see above data) and have been assigned as sequential integer values based on their position in the array. Additionally, some of the columns are hidden in the main table part, and the values from these hidden columns are supposed to be displayed in the drill-down area.


"aoColumns": [
{
"mData": null,
"sClass": "control center",
"sDefaultContent": "",
},
{ "mData": 0 },
{ "mData": 1 },
{ "mData": 2 },
{ "mData": 3 },
{ "mData": 4 },
{ "mData": 5 },
{ "mData": 6, "bVisible": false, "bSearchable": false},
{ "mData": 7, "bVisible": false, "bSearchable": false},
{ "mData": 8 },
{ "mData": 9 },
{ "mData": 10 },
{ "mData": 11 },
{ "mData": 12 },
{ "mData": 13 },
{ "mData": 14 },
{ "mData": 15 },
{ "mData": 16 },
{ "mData": 17 },
{ "mData": 18,"bVisible": false, "bSearchable": false},
{ "mData": 19,"bVisible": false, "bSearchable": false},
{ "mData": 20,"bVisible": false, "bSearchable": false},
{ "mData": 21,"bVisible": false, "bSearchable": false},
{ "mData": 22,"bVisible": false, "bSearchable": false},
{ "mData": 23,"bVisible": false, "bSearchable": false}


]



Here is my drill-down code:

$('#example td.control').live( 'click', function () {
var nTr = this.parentNode;
var i = $.inArray( nTr, anOpen );

if ( i === -1 ) {
$('img', this).attr( 'src', "images/details_close.png" );
var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
$('div.innerDetails', nDetailsRow).slideDown();
anOpen.push( nTr );
}
else {
$('img', this).attr( 'src', "images/details_open.png" );
$('div.innerDetails', $(nTr).next()[0]).slideUp( function () {
oTable.fnClose( nTr );
anOpen.splice( i, 1 );
} );
}

});


function fnFormatDetails( oTable, nTr )
{
var oData = oTable.fnGetData( nTr );
var sOut =
''+
''+
'Visit Type:'+oData.encountertype+''+
'Visit Reason:'+oData.encounterreason+''+
'Primary Plan Administrator:'+oData.planadministrator+''+
'Primary Insurance Deductible:'+oData.deductible1+''+
'HRA Balance:'+oData.hrabalance+''+
'Lab First Dollar:'+oData.labfirstdollar+''+
'OOP:'+oData.oopremaining+''+
'Secondary Insurance Deductible:'+oData.secondaryinsurancedeductible+''+
''+
'';
return sOut;
}


Note that the above columns in the drill-down correspond to the hidden columns on the main table as set up in aoColumns.

The ...,,+oData.object+... code appears incompatible with the array of array integers as it is currently set up and appears designed to be used in the context of data (and table setup) in the form of an array of objects.

So basically, how do you get the respective column value from the selected row calling it as an array integer rather than calling it as an object?

Or is there a better way to go about what I am trying to accomplish. I just need to link the drill-down code to the specific column value, presumably as a numeric array rather than naming it as an object.

Everything else works except for this, so it is probably something very simple.

Per the forum instructions, here is a link to the code on live.Datatables.net:

http://live.datatables.net/itupew/5/edit#javascript,html

Thanks for any insight into this problem.