Changing button text on click

NettSite

Hi,

How could I change the text of a button on an event? I have a button called "Select All", and when it is clicked the obvious thing happens, but I would like to change the same button to be called "Deselect All" at the same time.

tableTools: {
        aButtons: [
          {
            sExtends: "select_all", 
            sButtonText: 'Select All',
            fnClick: function () {
              
              if (typeof(all_selected) == 'undefined' || all_selected == false) {
                all_selected = true;
              } else {
                all_selected = false;
              }
              $('.toggle').attr("checked", all_selected);
              
              // Change button text?
              
            }
          },
      ]
}

Regards,

William.

allan

Hi,

There is no option for this in TableTools at the moment I'm afraid. You could do it using jQuery and a selector suitable for the button in question, but there is no API for the button text in TableTools.

The replacement I'm working on (due for release this month) will have such an API.

Allan

NettSite

Hi Alan,

Thanks - looking forward to that. Meanwhile, I have tried the following:

{
            sExtends: "select_all",
            sButtonText: 'Select All',
            sButtonClass: 'toggle-text',
            fnClick: function () {

              if (typeof (all_selected) == 'undefined' || all_selected == false) {
                all_selected = true;
                button_text = 'Deselect All';
              } else {
                all_selected = false;
                button_text = 'Select All';
              }
              
              // Toggle Checkboxes
              $('.toggle').attr("checked", all_selected);
              
              // Toggle button text
              alert(button_text); // Just checking!
              $('.toggle-text').innerHTML = '<span>' + button_text + '</span>';
              
            }
          },

The "toggle-text" class is added to the button (not really a button, an anchor), but the text doesn't change. What am I not seeing?

allan

No idea :-). That looks fine to me. Perhaps you can link to the page.

Also worth pointing out that the button node is passed into fnClick as the first parameter (documentation). You don't need to use classes to get a reference to the button in question.

Allan

NettSite

You da best!

This works perfectly:

              if (typeof (all_selected) == 'undefined' || all_selected == false) {
                all_selected = true;
                nButton.innerHTML = '<span>Deselect All</span>';
              } else {
                all_selected = false;
                nButton.innerHTML = '<span>Select All</span>';
              }

Thanks!