Show/Hide details about particular row

badea

Hi to all !

I added the code for hide/Show details about particular row as it described here - http://datatables.net/release-datatables/examples/api/row_details.html.
But the details button (image) is not clickable.
The only modification i made to my code - I changed the "live" event with "on" (because i am using jquery 1.7.1).
I tried with "live" - also didn't work.

My code is:
[code]

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

return sOut;
}


// var oTable;
$(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( {
"sPaginationType": "full_numbers",
"aoColumnDefs": [{ "bSortable": false, "aTargets": [ 0 ] }],
"aaSorting": [[ 1, "desc" ]],
"bProcessing": true,
"bServerSide": true,
"bInfo": false, // disabling showing info entry
"sAjaxSource": "view.php"
} );

/* 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
*/

$('#example tbody td img').on('click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* 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' );
}
} );



} );

[/code]

What I am doing wrong ? Any help will be apreciated.

Thanks.

allan

Try making your event handler 'live' as it is currently static:

[code]
$('#example tbody').on('click', ' td img', function ...
[/code]

That should work. See also http://datatables.net/faqs#events .

Allan

badea

Hi Allan.

I tried both "live" and "on" event, but don't work anyway.
What i'am doing wrong ?
Please, review again my code.

Thanks for reply.
Best regards,
Andrei.

Bolki

Hi Andrei,
I am working with similar issues see discussion "Expanded rows after ajax refresh"
I am using a slightly different approach where I add an ID to the cell where the expand image is:

[code]
nCloneTd.innerHTML = ''
[/code]

And then for the click action the following
[code]
$('#open').live('click', function () {
var nTr = $(this).parents('tr')[0];

if ( oTable.fnIsOpen(nTr) )
[/code]

Which fits in to your code.
Hope that helps a bit

Cheers
D

badea

Hi Bolki !

Thanks for reply ! It works! But i also have to upgrade datatables from 1.8 to 1.9 because of "fnIsOpen" function, that work from version 1.9
Another issue that i trouble in, after i added show/hide details about particular row -
the sorting don't work correctly. All columns doesn't sort in the right way.
I use:

[code]
"aoColumnDefs": [{ "bSortable": false, "aTargets": [ 0 ] }],
"aaSorting": [[ 1, "desc" ]],
[/code]

Any suggestions ?
Best regards.

badea

Answer for my last issue in this post is commented here - http://www.datatables.net/forums/discussion/11723/sort-not-work-correctly-when-adding-showhide-column#Item_2