Applying styles to data cells when dynamically hiding / showing cells.

neburton

Hi allan,

I want to show/hide columns dynamically and I've got this working using an example on your website (http://datatables.net/examples/api/show_hide.html) but I'm having problems with styles I'm applying to the data cells using fnRowCallback.

Within the callback I'm applying styles like this :

[code]
$('td:eq(2)',nRow).css("color","#aa0000");
[/code]

problem is, that when I enable/disable columns dynamically, it applies the style to the wrong cell.

How can I apply styles / manipulate the right data cell irrespective of whether shown or hidden?

Thanks

allan

Hi!

The problem here is that when DataTables removes a column from the display, it actively removes the DOM element from the document - hence why the :eq(2) means that the selector is picking up an unexpected element.

There are a couple of ways of dealing with this, but possibly the best way is to make use of the fnGetTds plug-in ( http://datatables.net/plug-ins/api#fnGetTds ) which deals with exactly this kind of thing :-).

With this plug-in the show/hide column example can be modified like this:

[code]
$(document).ready(function() {
$('#example').dataTable( {
"sScrollY": "200px",
"bPaginate": false,
"fnRowCallback": function ( nRow ) {
$(this.fnGetTds(nRow)[2]).css("color","#aa0000");
return nRow;
},
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [2] }
]
} );
} );

function fnShowHide( iCol )
{
/* Get the DataTables object again - this is not a recreation, just a get of the object */
var oTable = $('#example').dataTable();

var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true );
}
[/code]

So note that fnGetTds() gives you an array of the TD elements - so to access the one you want, just use an array index.

Regards,
Allan

neburton

brilliant, it works. Many thanks.

neburton

Alan,

I've discovered I'm getting quite a weird effect when using fnGetTds and showing/hiding columns.

I've created a function to show/hide columns that works with checkboxes:

[code]


[/code]

the javascript function is below:

[code]
$(".datatablefieldtoggle").bind("click", function(e)
{
var thisstate = $(this).getValue();
var state = (thisstate=='on')?true:false;
var settings = $(this).attr('id');
var subsettings = settings.split('_');
var table = subsettings[0];
var column = subsettings[1];
var thistable = $('#'+table).dataTable();
fnShowHide(thistable,column,state)
});

function fnShowHide(table,iCol,state)
{
var oTable = table.dataTable();
oTable.fnSetColumnVis( iCol, state);
}
[/code]

"getValue" is another function that returns the correct value of checkboxes, which you may be familiar with.

In my datatable each row is bound during fnRowCallback with a click event handler so that a database record is opened elsewhere in my app and I also assign a context menu to each row. Previously this has worked with no problem.

After moving to using fnGetTds rather than the method I was using previously, and after showing / hiding columns a few times, it seems that multiple click handlers are being assigned to each row, so my loadcontact function is being called several times, depending on how many show/hide column operations I do.

If need be I can provide more code detail.

Thanks for your assistance,

Neil

allan

Hi Neil,

> it seems that multiple click handlers are being assigned to each row

I suspect this is the key thing here. You can check this with another one of my scripts called Visual Event: http://sprymedia.co.uk/article/Visual+Event . Its a bookmarklet which will show all the events which are attached to elements on the page, thus allowing you to confirm if this is correct.

If it is, then the question is, when are you calling the click bind? Is it on every show / hide, because this effect is cumulative. What I would suggest is rather than using bind, use a live event and only execute it once. That will make things much more manageable I believe.

Regards,
Allan

neburton

I can see that additional handlers are assigned each time I use my show/hide function, however I'm assigning the initial click handler during fnRowCallback, so cannot understand why oTable.fnSetColumnVis is having this additive effect.

allan

fnSetColumnVis will cause the table to do a redraw when it is called, which is why fnRowCallback is being called when your show/hide columns ( http://datatables.net/api#fnSetColumnVis ). What you can do to override that is to pass in false as the third parameter to stop the redraw.

However, what I would suggest is a slightly different approach, which is to set a flag on the TR element when you add the event handler, and then do a check to see if that flag is set or not before adding it again in future. For example:

[code]
"fnRowCallback": function ( n, data ) {
if ( typeof n.__eventFlag == 'undefined' ) {
n.__eventFlag = true;
$(n).click( function () {
alert('hello');
} );
}
}
[/code]

And that would stop this problem from showing up regardless of the table redraw.

Regards,
Allan

neburton

That seems to work.

Thanks!

allan

Excellent - no problem at all :-)

Regards,
Allan