Multiple datatables with tabs - server side - row details.

billdacat

I have 2 datatables (soon to be 3, maybe 4) on one page, and am using jQuery UI tabs to go between them. All the tables are processed server side.

The issue I'm hitting is that the expanding row button is only working on the 2nd table. Clicks to expand a row on the first table change the image (to the close button), but no content ever loads.

Any help appreciated, still learning.

[code]


/* Formating function for row details */

var oTable;

function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );

var sOut = $.ajax({
type: "GET",
async: false,
url: '/history.php?requestid='+aData[1],
cache: false
});

return sOut.responseText;
}

$(document).ready(function() {

oTable = $('#ticketstest-<?=$tab;?>').dataTable( {
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"bDestroy": true,
"sAjaxSource": "/ss_processing.php",
"aoColumns": [ {"sClass": "center", "bSortable": false, "bSearchable": false},
{"bSearchable": false, "bVisible": false},
{"bSearchable": false, "bSortable": false, "sClass": "center"},
{"sClass": "center", "bSearchable": false},
{"bSearchable": true},
{"bSearchable": true},
{"bSearchable": false, "bSortable": false},
{"bSearchable": false, "bSortable": false, "sClass": "center"} ],
"aaSorting": [[1, 'asc']],
"fnServerData": function(sSource, aoData, fnCallback) {
aoData.push( { "name": "gid", "value": "1006" } );
aoData.push( { "name": "rq_mode", "value": "<?=$rq_mode;?>" } );
aoData.push( { "name": "auth", "value": "<?=$auth;?>" } );
aoData.push( { "name": "use_sub", "value": "<?=$use_sub;?>" } );
aoData.push( { "name": "tab", "value": "<?=$tab;?>" } );
$.getJSON(sSource, aoData, function(json) {
fnCallback(json);
});
},
"sPaginationType": "full_numbers"
});

$("tbody tr").live("mouseover", function(){
$(this).children().addClass("highlighted");
});
$("tbody tr").live("mouseout", function(){
$(this).children().removeClass("highlighted");
});

$('td', oTable.fnGetNodes()).hover( function() {
var iCol = $('td').index(this) % ($(this).siblings('td').length + 1);
var nTrs = oTable.fnGetNodes();
$('td:nth-child('+(iCol+1)+')', nTrs).addClass( 'highlighted' );
}, function() {
$('td.highlighted', oTable.fnGetNodes()).removeClass('highlighted');
} );

$('#ticketstest-<?=$tab;?> tbody td img').live( 'click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "/images/datatables/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "/images/datatables/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );

} );

[/code]

billdacat

The javascript error kicking back that I'm trying to figure out:

Uncaught TypeError: Cannot read property '_aData' of undefined
j.fn.dataTable.fnGetDatajquery.dataTables.min.js:118
fnFormatDetailsdetails.php:342
(anonymous function)details.php:279
oajquery-1.4.2.min.js:18
c.event.handlejquery-1.4.2.min.js:55
c.event.add.j.handle.o

billdacat

My crash course in jQuery continues. So apparently the problem is that on the first table, the object (oTable) being passed to the fnFormatDetails is the second table. Each table is loaded in a tab, so each initializes correctly..

I'm guessing the problem is that since the second table initializes last, it's keeping the oTable object. So when I switch tabs and try to expand a row, I get that error as it's trying to manipulate the other datatable.

At least, that's what I think may be happening. Would appreciate any guidance.

Thanks!