Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  December 2020 edited December 2020 Answer ✓

  You can use buttons-action to disable/enable the buttons - something like this here: http://live.datatables.net/yohuluco/4/edit

  The important code is:

      .on('buttons-action', function ( e, buttonApi, dataTable, node, config ) {
        if ( buttonApi.text() == 'Times' ) {
          buttonApi.button(0).enable();
          buttonApi.button(1).disable()
        }
        else {
          buttonApi.button(1).enable();
          buttonApi.button(0).disable()
        };
      } );;
  

  Colin
• kraftomatic Posts: 78Questions: 13Answers: 0

  December 2020

  Thanks Colin. Is there a way I can append CSS instead of disabling/enabling? I tried ".addClass" but that doesn't work. I'd like to just make the button look more prominent/active, once clicked.

  Ed
• kthorngren Posts: 21,450Questions: 26Answers: 4,975

  December 2020 Answer ✓

  I think button().node() is what you are looking for.

  Kevin
• kraftomatic Posts: 78Questions: 13Answers: 0

  December 2020

  Thanks guys. I've "kind of" gotten it working both ways, but am having trouble setting the first button to "active" when the table loads, to show the user which view is currently displaying. Here's my code, which works when clicking back and forth. I'm just not sure how to set the CSS on load. Here's the relevant code:

  http://live.datatables.net/yohuluco/5/edit

  Thanks,
  Ed

      .on('buttons-action', function ( e, buttonApi, dataTable, node, config ) {
  
          if ( buttonApi.text() == 'Times' ) {
              buttonApi.button(0).enable();
              buttonApi.button(1).disable()
          }
          else {
              buttonApi.button(1).enable();
              buttonApi.button(0).disable()
          };
      } );;
  
  button.dt-button, div.dt-button, a.dt-button, input.dt-button { opacity: 1; color: #333; }
  button.dt-button.disabled, div.dt-button.disabled, a.dt-button.disabled, input.dt-button.disabled { border: 1px solid #999; color: #ac1a2f; opacity: 1; }
  
• kthorngren Posts: 21,450Questions: 26Answers: 4,975

  December 2020 Answer ✓

  Use initComplete, like this:
  http://live.datatables.net/yohuluco/6/edit

  Kevin
• kraftomatic Posts: 78Questions: 13Answers: 0

  December 2020

  Thank you Kevin,