Server side row details - expand/collapse cells not appearing.

billdacat

Not sure why the cells/buttons to expand/collapse rows aren't showing up. Any ideas?

[code]

$(document).ready(function() {

oTable = $('#ticketstest').dataTable( {
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"bDestroy": true,
"aoColumns": [ {"sClass": "center", "bSortable": false}, {"bSearchable": false, "bSortable": false}, {"bSearchable": false}, {"bSearchable": true}, {"bSearchable": true}, {"bSearchable": false, "bSortable": false}, {"bSearchable": false, "bSortable": false} ],
"aaSorting": [[1, 'asc']],
"sAjaxSource": "../ss_processing.php",
"fnServerData": function(sSource, aoData, fnCallback) {
aoData.push( { "name": "gid", "value": "1006" } );
aoData.push( { "name": "rq_mode", "value": "<?=$rq_mode;?>" } );
$.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');
} );


/*
* Insert a 'details' column to the table
*/

var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#ticketstest thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('#ticketstest tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

// Add event listener for opening and closing details
// Note that the indicator for showing which row is open is not controlled by DataTables,
// rather it is done here

$('#ticketstest 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]

Fairly new to jQuery/DT, so I'm sure it's something basic I'm forgetting. Any help much appreciated!

billdacat

Nevermind -- didn't realize I had to have the SS script output the buttons, figured it was done automatically like so much other stuff datatables does. I'm in good shape (for now).. thanks!