Changing Button Text Dynamically

essexsteph

I'm using DataTables in a project for a large UK local authority and loving it's ease of use and functionality. I'm added some buttons to TableTools to toggle the display of some hidden columns, I'd like to change the text dynamically, i.e. from 'Show Percentages' to 'Hide Percentages', but can't see how to do it - any suggestions or pointers gratefully received.

A donation will be coming your way at some point when the finance department get their head round the concept...

KA2012

Did you figure out how to do this? I'm having the same problem. Not able to set "sButtonText" from inside any functions like "fnClick"

allan

Currently there isn't a way of doing this dynamically - at least not by the public API. However, you do get given the button's node as the first parameter for fnClick so you could just use a little DOM manipulation to change the text (TableTools doesn't care what the text is, its just the node it needs to keep a reference to).

Allan

KA2012

Thanks Allan!

I was able to successfully set my custom text using

$(nButton).html('myToggleText');

Now, is there a way to enable/disable the button (so it looks faded/active) based on when I click an external utton elsewhere? (I'm depending on an event not related to DataTables). It seems like I have access to the button node nButton only in the TableTools functions, such as fnInit, fnClick. I don't want the user to be able to click the button until I "activate" it.

allan

Currently - no - there is no API for that either. Although it does sound like an excellent idea of an addition in future (note made).

Until then its just a case of adding and removing classes. Have a look at the fnSelect functions for the "single_select" button in the TableTools code for example, to see how TableTools itself does it.

Allan

KA2012

I understand how I can add/remove classes, but how can I get a reference to my button from outside the "aButtons" param? For example, I can set the "disabled" class during "fnInit", but when I get my external event then how can I refer to that button? Can I assign it an id when initializing oTableTools, and then use that $(#tableToolsButtonId).css(activateclass)? Or do I have to redraw the whole DataTables to get the Toolbar to refresh (and therefore call fnInit again)?

allan

Currently the only way of really doing this is using the sButtonClass option for the button and assigning a class which you can then use in a selector to manipulate the button.

Allan

KA2012

It seems like there is a DTTT_disabled class, but that is not disabling my button. When I add this class, my button is still clickable, and looks like the other buttons (when I mouse over, it has the "clickable" look). How can I make it completely unclickable? Maybe grayed out (and also therefore not do any action when it's clicked).

allan

> When I add this class, my button is still clickable

That is the case yes. I've never been 100% convinced about this particular interaction and I might change it in future, but the idea is that you would be able to flash up a message saying "you need to select a row first", or just ignore the command as you wish (i.e. I wonder if it allows too much flexibility!). In your fnClick function you should check for the disabled class and just return out if it is present.

Allan