Undefined result when clicking a row to view cell details [SOLVED]

_rain_

Hi Guys,

I'd like to ask for your assistance in figuring out this issue of mine.

Below is my datatable initialization

[code]
var oTable = $('#example').dataTable({
"bStateSave": true,
"bJQueryUI": false,
"bProcessing": true,
"sPaginationType": "full_numbers",
/*"sAjaxSource": '../server.side/Query.ashx',*/ // this is just an alternative source
"sAjaxSource": '../data3.txt',
"iDisplayLength": 30,
"bPaginate": true,
"aoColumnDefs": [
{
"fnRender": function (col) {
return "Update";
}, "bUseRendered": false, "aTargets": [0], "bSortable": false, "mDataProp": null
},
{
"fnRender": function (col) {
return "Remove";
}, "bUseRendered": false, "aTargets": [1], "bSortable": false, "mDataProp": null
},
{ "aTargets": [2], "bSortable": false, "mDataProp": "Col2" },
{ "aTargets": [3], "bSortable": true, "mDataProp": "Col3" },
{ "aTargets": [4], "bSortable": true, "mDataProp": "Col4" },
{ "aTargets": [5], "bSortable": true, "mDataProp": "Col5" },
{ "aTargets": [6], "bSortable": true, "mDataProp": "Col6" },
{ "aTargets": [7], "bSortable": true, "mDataProp": "Col7" },
{ "aTargets": [8], "bSortable": true, "mDataProp": "Col8" },
{ "aTargets": [9], "bSortable": true, "mDataProp": "Col9" },
{ "aTargets": [10], "bSortable": true, "mDataProp": "Col10" },
{ "aTargets": [11], "bSortable": true, "mDataProp": "Col11" },
{ "aTargets": [12], "bSortable": true, "mDataProp": "Col12" },
{ "aTargets": [13], "bSortable": true, "mDataProp": "Col13" },
{ "aTargets": [14], "bSortable": true, "mDataProp": "Col14" },
{ "aTargets": [15], "bSortable": true, "mDataProp": "Col15" }
]
});
[/code]

here is the content of data3.txt

[code]
{
"aaData":
[
{
"Col2": "averylongvalue",
"Col3": "justaverulongvalue",
"Col4": "4.000000000",
"Col5": "1/1/1900 12:00:00 AM",
"Col6": "3.200000000",
"Col7": "12.940000000",
"Col8": "87.040000000",
"Col9": "12.940000000",
"Col10": "87.290000000",
"Col11": "0",
"Col12": "-",
"Col13": "-",
"Col14": "-",
"Col15": "0",
"Col16": "",
"Col17": "30/12/2011 3:41:45 PM"
}
]
}
[/code]

My Issue in on this part:

[code]
$('#example tbody td').live('click', function () {

/* Get the position of the current data from the node */
var aPos = oTable.fnGetPosition(this);

/* Get the data array for this row */
var nTds = oTable.fnGetData(aPos[0]);

/* Clicked the first/ first column row */

alert(aPos); /* Will alert 0,0,0 */
alert(aPos[2]); /* Will alert 0 */

alert(nTds[aPos[2]]); /* this displays UNDEFINED - this part is really puzzling me ???*/

nTds[aPos[2]] = 'clicked';
alert(nTds[aPos[2]]); /* This will display clicked*/

this.innerHTML = 'clicked'; /* Update content of clicked cell */

return;
});
[/code]

Hope someone can point me on the right direction.

Thanks!

allan

> var nTds = oTable.fnGetData(aPos[0]);

I think there is a misunderstanding here - fnGetData will get your original data source for the row (in this case an object) - so when you then try to get an item from the source, you need to use the same format that you fed to DataTables. In this case what I would suggest you have is:

[code]
$('#example tbody td').live('click', function () {
var data = oTable.fnGetData( $(this).parents('tr')[0] );
// work with data (i.e. data.Col2 etc)
} );
[/code]

Allan

_rain_

Nailed it! Thanks!