Hidden rows, multiple images

bassio84

Hi there,

I'm using the hidden row feature in DataTables. I'm using images in my hidden row and at the end of my visible row as well as the image at the start of the row.
The image at the start of the row, is the image that should open and close the hidden row. This is working as it should.
My only problem is, that when I open the hidden row and click one of the images (that will function as a link to a downloadable file when I'm done) it closes the hidden row. The same happens for the image I use at the end of the row.
Is there a possibility to exclude these images from the DataTables code?

This is the Jquery code I'm using:

Right now it's targeting: '#companies tbody td img' which targets all images in any . So basicly my question is: "Is there a possibility to make the script target specific td's, or specific images?".

[code]
$('#companies').ready(function()

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

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

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

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#companies').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']]
});
oTable.$('tr:odd').css('backgroundColor', '#edeff4');

/* 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
*/
$('#companies tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;

if ( this.src.match('details_close') )
{
/* This row is already open - close it */
oTable.fnClose( nTr );
this.src = "img/details_open.png";
}
else
{
/* Close any rows which are already open */
$("td img", oTable.fnGetNodes()).each( function () {
if ( this.src.match('img/details_close.png') ) {
oTable.fnClose( this.parentNode.parentNode );
this.src = "img/details_open.png";
}
});
/* Open this row */
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
this.src = "img/details_close.png";

}
} );
[/code]

This is the image at the end of the row I'm talking about. This image links to a new page, so for this image it isn't really a problem. The only downside is that it shortly turns into the "details_close.png" image before it links me to the new page, which doesn't look very pretty.
The images in the hidden row however are going to be used to download a file. The row should stay opened when these images are clicked.

[code]

[/code]

Any help would be appreciated.
Thanks in advance!

Bas

bassio84

Hi there,

I managed to fix it.
The fix was a lot easier than I expected. I just had to assign an id to the image.
For anyone who's curious about the fix:

I changed this line:
[code]
nCloneTd.innerHTML = '';
[/code]
to:
[code]
nCloneTd.innerHTML = '';
[/code]

And the following line:
[code]
$('#companies tbody td img').live('click', function () {
[/code]
to:
[code]
$('#companies tbody td img#openclose').live('click', function () {
[/code]

Now only the image with the id "openclose" is being used to open and close the hidden rows.

Sometimes getting a bit of sleep and have a fresh look at things brightens a lot of things up ;)