Setting State w/CSS on Buttons

kraftomatic

Hi All,

I'm using buttons to filter views, shown here:

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

Since the "Points" button is displaying on default, I would like to apply a "selected" type visual indicator to show it's selected. And then flip it to "Time" once that is clicked. What would be the best way to do that?

Thanks again,

Ed

colin

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

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

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

Kevin

kraftomatic

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

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

Kevin

kraftomatic

Thank you Kevin,