hidden row information in table

psjandhyala

Hi Allen,

Thanks for providing wonderful plug in.

Right now I am using 1.6.2 version of data table plug in my project.

I implemented the below mentioned concept in my project.
http://datatables.net/examples/api/row_details.html

When i clicked on a particular row , I am getting following formatted information in the UI page. It is not displaying as HTML content. it is displaying as string content

[code]
Rendering engine:249522 Tallahassee Endoscopy CtrLink to source:Could provide a link hereExtra info:And any further details here (images etc)
[/code]

Did i missed anything? your response will be highly appreciated

Regards
psjandhyala



Please find my code below.
[code]
<![CDATA[
var oTable;

/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[4]+' '+aData[6]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';
return sOut;
}
jQuery(document).ready(function(){
readTableData();
});

function readTableData(){
oTable = jQuery('#accountslist').dataTable({
"bLengthChange": false,
"iDisplayLength": 20,
"sDom": '<"top"<"bottom"p',
"bAutoWidth": false,
"bStateSave": true,
"aaSorting": [[4,'asc']],
"sPaginationType": "scrolling",
"aoSearchCols": [
null,
null,
{ "sSearch": jQuery('#defaultfiltervalue').val()},
null,
null,
null,
null,
null,
null,
null
],
"oLanguage": {
"sLengthMenu": "Display _MENU_ records per page",
"sZeroRecords": "",
"sInfo": " _START_ of _TOTAL_ ",
"sInfoEmtpy": " 0 of 0 ",
"sInfoFiltered": ""
},
"aoColumns": [
{"sWidth": "2%", "bSortable": false },
{"sWidth": "4%", "bSortable": false },
{"sWidth": "2%", "bSearchable": true, "bVisible": false },
{"sWidth": "4%", "bSortable": false},
{"sWidth": "7%", "bSearchable": true, "sType": 'numeric'},
{"sWidth": "7%", "bSearchable": true, "sType": 'numeric' },
{"sWidth": "21%", "bSearchable": true },
{"sWidth": "6%", "bSearchable": false, "sType": 'numeric' },
{"sWidth": "38%", "bSearchable": false },
{"sWidth": "8%", "bSearchable": false }
]
});

/* 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
*/
$('td img[id=detailsopenclose]', oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "/alerts/salesrep/images/dataTables/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "/alerts/salesrep/images/dataTables/examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );

jQuery('#filter_account_name input').keyup( fnFilterAccountNames );
jQuery('#filter_account_number input').keyup( fnFilterAccountNumber );
}

]]>
[/code]

psjandhyala

Hi Allen,

I just resolved this problem. I moved fnFormatDetails() function to different java script file.

I think because of transformation fnFormatDetails() method is not recognized.

Regards
psjandhyala