On-delegated click event and fnGetData

Hi all,

Disclaimer: I'm fairly new to javascript, jquery and datatables and at the moment am relying on stitching together code in the examples to get somewhere close to what I want to do.

I have a number of datatables, each within jqueryui tabs, displaying different views on the same database. So far so easy. The problem is that I need to be able to select a row, extract data (i.e. keys) from hidden columns and pass those data to jqueryui modal dialogs. I'm struggling with the hidden columns bit.

EDIT: forgot to mention, using dataTables v1.9.4

If I initialise my table thus:

	oTable = $('#my_table').dataTable( {
                "bProcessing": true,
				"bDeferRender": true,
				"bJQueryUI": true,
				"bAutoWidth": false,
                "sAjaxSource": './loadstuff.php',
                "aoColumns": [                        
					{ 	"mData": "t_bid", 
						"bVisible": false
					},
					{ 	"mData": "t_pid", 
						"bSortable": false, 
						"bVisible": false
					},
					{ 	"mData": "t_rn"  },
					{ 	"mData": "t_bn" },
					{ 	"mData": "t_btn"},
					{ 	"mData": "t_bx" },
					{ 	"mData": "t_by" }
					],
                "fnServerParams": function ( aoData ) {
                        aoData.push( {"name": "term", "value": "{S_UID}" } );
                }
        });

Then the columns are hidden correctly and the table displays correctly, but the data from the hidden rows is not available in the DOM, and I can't extract it using the following (which is straight from the example) - I only get the columns that actually appear in the resulting HTML.

	$('body').on('click', 'tbody tr', function() {
		if ( $(this).hasClass('row_selected') ) {
			$(this).removeClass('row_selected');
			}
		else {
			$(this).siblings('.row_selected').removeClass('row_selected');
			$(this).addClass('row_selected');
		}
		
			
		$("td", this).each(function(j) {
			console.log("".concat("value: ", j, ", value: ", $(this).text()));
		});		

	});

At the moment I've been getting by with a kludge. I've defined a style "hidden", and pushed that to the rows I want to hide.

.hidden {
	visibility:hidden;
	column-width: 0px;
}

	oTable = $('#my_table').dataTable( {
                "bProcessing": true,
				"bDeferRender": true,
				"bJQueryUI": true,
				"bAutoWidth": false,
                "sAjaxSource": './loadstuff.php',
                "aoColumns": [                        
					{ 	"mData": "t_bid", 
						"sClass": "hidden",
						"sWidth": "0px"
					},
					{ 	"mData": "t_pid", 
						"bSortable": false, 
						"sClass": "hidden",
						"sWidth": "0px"
					},
					{ 	"mData": "t_rn"  },
					{ 	"mData": "t_bn" },
					{ 	"mData": "t_btn"},
					{ 	"mData": "t_bx" },
					{ 	"mData": "t_by" }
					],
                "fnServerParams": function ( aoData ) {
                        aoData.push( {"name": "term", "value": "{S_UID}" } );
                }
        });

Then I get my table and my data but it looks ugly, leaving empty space where the hidden columns should be.

What I'd like to do is use fnGetData(), which I understand should return the whole hidden row. Then I can fetch all necessary values from the server, [do stuff] with them.

Unfortunately this doesn't send anything to the console:

	$('body').on('click', 'tbody tr', function() {
		if ( $(this).hasClass('row_selected') ) {
			$(this).removeClass('row_selected');
			}
		else {
			$(this).siblings('.row_selected').removeClass('row_selected');
			$(this).addClass('row_selected');
		}
		
		var myTable = fnGetData( this );
	        for(var i=0; i<myTable.length; i++){
                        console.log(myTable[i]);
                }
	});

... and the code from the example (http://datatables.net/api#fnGetData) doesn't register click events. Please could you provide me with some pointers as to where I'm going wrong?

Unfortunately the site presently lives on localhost, so can't link to it.