Make custom buttons look like column visibility buttons

mikelbeck

I have a data table that has a number of buttons, some built-in others custom.

How do I make the custom buttons act like the built-in column visibility button? Specifically, when using the column visibility button the button goes from looking raised to looking flat to show that it's been clicked (like on this page: https://datatables.net/extensions/buttons/examples/column_visibility/simple.html).

How can do I do the same thing with a custom button?

F12Magic

I think you just need to give your button the class dt-button. This can also be done with a anchor tag or a div tag if I'm correct.

<button class="dt-button">Press me</button>

allan

Documentation for create custom buttons is available here.

Allan

mikelbeck

I've tried assigning the dt-button and the buttons-colvis class to my custom buttons but it doesn't display the same as the column visibility buttons.

Here's some pictures of what I'm trying to do.

This is the built-in column visibility button (colvis). In this image http://imgur.com/NX3HzOU the "region" option has been selected. You can see that it looks flat compared to the other buttons (which have not been selected).

This is my custom button: imgur.com/a/gQWb0. Here I've already selected one of the options but it doesn't show flat like the previous example.

What I'm trying to do is make the 2nd example look like the 1st when any of the buttons are selected.

allan

Use the button().active() method to set the state of the button.

Allan

mikelbeck

More pics...

In this pic I've clicked the "toggle columns" button and a drop-down was displayed, When I click any of the items on the drop-down it changes the look of the buttoon: imgur.com/a/er6Im

This is my custom button, I clicked on the "Region" top-level button and the then one of the options of the drop-down, but the look of the button on the drop-down is not changed. imgur.com/a/GYlg9

When I use the method you mentioned it changes the look of the buttons at the top-level ("Toggle Columns", "Computer Type", etc.).

Actually now that I'm looking at it closer I see that the buttons on the custom button drop-down do not have the 3D look to begin with. How do I set that and then change it to look "flat" when it's selected?

allan

How do I set that and then change it to look "flat" when it's selected?

There isn't actually an option to set the active state on initialisation. Instead you would use the method I linked to above immediately after the table has been created to set the state.

Allan

mikelbeck

Right, I got that. But how do I reference the buttons on the drop-down?

In this example:
"buttons": [
{
extend: 'colvis',
text: 'Toggle columns',
columns: ':gt(1)',
},
{
extend: 'collection',
text: 'Region',
autoClose: true,
buttons: [
{ text: 'All', action: function () { oTable.column(4).search("").draw(); } },
{ text: 'APAC', action: function () { oTable.column(4).search("APAC").draw(); } },
{ text: 'EMEA', action: function () { oTable.column(4).search("EMEA").draw(); } },
{ text: 'NALA', action: function () { oTable.column(4).search("NALA").draw(); } },
{ text: 'Unknown', action: function () { oTable.column(4).search("Unknown").draw(); } },
],
fade: true,
},

How would I determine/access the index for the "APAC" button?

If I use oTable.button( 1 ).active( true ); it changes the state of the "Region" button.

mikelbeck

OK I've figured this out. What I've done is set a class on each of the buttons on the drop-down, when they're clicked I flip all of the buttons with that class to active:true so they will display as 3D. The one that's clicked I set to active:false so it will display flat. On the page load I set all of the buttons with this class to active:true. The "all" button is set to active:false initially.

This mimics the colvis functionality. There's probably a more elegant way to do this but for the moment this works.

    buttons: [
      { text: 'All', action: function () { oTable.column(13).search("").draw(); } },
      { text: 'Servers', action: function () { oTable.column(13).search("> 1").draw(); } },
      { text: 'Workstations', action: function () { oTable.column(13).search("< 2").draw(); } },
    ],
    fade: true, 
  },
  {
    extend: 'collection',
    text: 'Region',
    autoClose: true,
    buttons: [
      { text: 'All', className: 'btn-region-all', action: function () { 
          oTable.column(4).search("").draw(); 
          oTable.buttons('.btn-region').active(true);
          this.active(false);
        } 
      },
      { text: 'APAC', className: 'btn-region', action: function () { 
          oTable.column(4).search("APAC").draw();
          oTable.buttons('.btn-region-all').active(true);
          oTable.buttons('.btn-region').active(true);
          this.active(false);
        } 
      },
      { text: 'EMEA', className: 'btn-region', action: function () { 
          oTable.column(4).search("EMEA").draw(); 
          oTable.buttons('.btn-region-all').active(true);
          oTable.buttons('.btn-region').active(true);
          this.active(false);
        } 
      },
      { text: 'NALA', className: 'btn-region', action: function () { 
          oTable.column(4).search("NALA").draw(); 
          oTable.buttons('.btn-region-all').active(true);
          oTable.buttons('.btn-region').active(true);
          this.active(false);
        } 
      },
      { text: 'Unknown', className: 'btn-region', action: function () { 
          oTable.column(4).search("Unknown").draw(); 
          oTable.buttons('.btn-region-all').active(true);
          oTable.buttons('.btn-region').active(true);
          this.active(false);
        } 
      },
    ],
    fade: true, 
  },

allan

You can also use indexes such as 0-1. The button-selector documentation has full details on how buttons can be selected.

Allan

mikelbeck

I'd prefer to use names in case i decide to add additional buttons in the future, then I won't have to go back and adjust the indexes. But that link was helpful, I had found that page before I put together the code that worked.

Thanks!