[Solved] Row expand image not showing up

anjibman

Hi,

While doing server side processing I am not able to get row expand link as http://datatables.net/release-datatables/examples/api/row_details.html.

My whole code
[code]


/* Formating function for row details */
function fnFormatDetails ( oTable, nTr ) {
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Source File:' + aData[5] + '';
sOut += 'Destination File:' + aData[6] + '';
sOut += 'Size: ' + aData[7] + '';
sOut += 'Result: ' + aData[8] + '';
sOut += '';
return sOut;
}

$(document).ready(function(){

/* Insert a 'details' column to the table */
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

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

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

var oTable = $('#example').dataTable({
"aaSorting": [[ 1, "desc" ]],
"aLengthMenu": [50, 100, 200, 500],
"aoColumnDefs": [
{ "bSearchable": false, "aTargets": [0] },
{ "bSortable": false, "aTargets": [0] },
{ "bVisible": false, "aTargets": [5, 6, 7, 8]}
],
"aoColumns": [
{ "mDataProp": null },
{ "mDataProp": "date" },
{ "mDataProp": "sourceAgent" },
{ "mDataProp": "destinationAgent" },
{ "mDataProp": "status" },
{ "mDataProp": "sourceFileName" },
{ "mDataProp": "destinationFileName" },
{ "mDataProp": "fileSize" },
{ "mDataProp": "result" }
],
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"iDisplayLength": 50,
"sAjaxSource": "showall.do",
"sEmptyTable": "No matching data available",
"sPaginationType": "full_numbers",
"sDom": '<"H"lfr>t<"F"p>'
});



var oTableTools = new TableTools( oTable, {
"aButtons": [{
"sExtends" : "print",
"sButtonText": " ",
"sToolTip": "Print"
}]
});

$('#example_wrapper').before( oTableTools.dom.container );

/* Add event listener for opening and closing details */
$('#example 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/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
});








Date
Source Agent
Destination Agent
Status
Source File Name
Destination File Name
File Size
Result
















[/code]