How to determine which DataTable was clicked on

jg8273

Hello all,

I am new to DataTables and to JQuery in general. I was following the example that shows how to show or hide details about individual rows. In my case, I have multiple DataTables on one page. The example code provided has these lines:

[code]
var oTable = $('#example').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']]
});
[/code]

Since, in my case, I have multiple DataTables, oTable winds up being an array. Later in the example, it shows how to add an event listener to open and close rows in response to the user clicking on the show/hide icon.

[code]
$('#example tbody td img').live('click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "../examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "../examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
[/code]

Since oTable is an array in my case, the functions called on the oTable object only seem to apply to the first element of the array. So, the show/hide behavior works for the first table on my page, but not for any of the others. Does anyone have an idea of how to make this work with an array when there are multiple DataTables on one page? I appreciate your help.

jg8273

I should mention that I apply the class "dataTable" to each of my tables and then select them all like so:

[code]
var oTable = $('.dataTable').dataTable({
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ 0 ]
} ],
"aaSorting" : [ [ 1, 'asc' ] ]
});
[/code]

That's why I end up with an array.