How to show hidden row details only in a specific column ?

allanteixeira

Good Morning !
I'm trying to follow the example to show details of hidden row. And it works, but I have 3 columns with images and when I click on any of the images, the "fnIsOpen" is called.
I just need to execute the function in a column.
How do I do that function execute only in a specific column?


[code]
$('#tabtravel tbody td img').live('click', function () {

var nTr = $(this).parents('tr')[0];

if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "img/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "img/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}

} );
otable = $('#tabtravel').dataTable();
} );
[/code]

Thank you for your attention,

Allan Teixeira

allan

Modify the selector. Something like:

[code]
$('#tabtravel tbody').on( 'click', 'td:first-child img', function () { ...
[/code]

Allan

allanteixeira

Hi Allan. Thanks for your attention. I tried but did not work.
I modified the code to:

[code]
$ ('# Tabtravel tbody') in ('click', 'td: eq (6) img' Function () {

[/code]

where the index 6 is the column index. But this code only worked for row 1 column 6. In line 2 of column 6 it did not work. Actually, I need the function to be called throughout the column 6.
Is there any way to call the function only in the column index 6?

Thank you again.

allanteixeira

Good Morning. If anyone has other ideas, I'm accepting suggestions.
Currently, I have 3 columns with images ('Details', 'Edit', 'Delete'), and in any column that I click the 'fnIsOpen function' is being called. I would like to call this function only in column 6 ('Details').
I thank you for your help.

allanteixeira

Hi Allan. I solved my problem partially.
I'm testing the following code:
[code]
var oTable;
oTable = $('#tabtravel ').dataTable();

oTable.$('td ').on('click', function () {
var aPos = oTable.fnGetPosition( this );
$position = aPos;
$pos = $position[2];
var nTr = $(this).parents('tr')[0];
if ($pos == 6)
{
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "img/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "img/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
}
} );

[/code]

The function "fnIsOpen" is called only by clicking on the image or in any cell in column 6.
However, with the change in the code, the image that is in this cell no longer changes automatically.

There is another way to make the image change as the status open / closed?

Thank you for your attention.

GregP

It's a matter of first selecting the right listener. Right now here's what you're doing:

"On click of any TD element, execute a function. Within that function, let's figure out if this is the right column or not, and then try to do stuff!"

You save an entire first step by isolating to the correct column. During the initialization of the table, you can use sClass to give a class to all cells in that column. I'm also not sure about that syntax for using .on()... it's not the standard syntax but I couldn't say for sure if it works or not... maybe that's the problem all along! In any event, by using classes, your listener becomes:

[code]
oTable.on('click', 'td.someClass', function() {
// code to execute when any cell with this particular class is clicked
var nTr = $(this).closest('tr'); // (or however you want to target the row)
}
[/code]

The next thing I would consider doing is using CSS classes instead of swapping out images. In psuedo-code:

[code]
if (details_are_opened) {
// add "opened" class to clickable cell
} else {
// remove "opened" class from clickable cell
}
[/code]

The jQuery .addClass() and .removeClass() methods make this really easy. :)

allanteixeira

Thanks greg. I will test your sugestion.