How do I apply different button styles across different button groups?

mnbob70

Using instructions from this link, I have set up mulitple button groups.

I then tried to use buttons.dom.button to style each separate group but it only works for the first group because it appears to only work during table initialization. The subsquent groups added using new $.fn.dataTable.Buttons simply fail to display without any javascript errors if they contain a dom option.

Here is an example of what I'm trying to do with the javascript that does not work commented out. How do I set different buttons.dom.button styling between the two groups shown: Buttons 1&2 and Buttons 3&4?

colin

buttons.buttons.className should be inside the button definition, so something like this :

    {
      text: 'Button 1',
      className: 'btn btn-primary fred',
      action: function ( e, dt, node, conf ) {
        console.log( 'Button 2 clicked on' );
      }
    },

You'll see btn-primary and fred are now added to the classes for that first button.

Is that what you're looking for?

Colin

mnbob70

Unfortunately that does not work because it just adds those classes to the exsting button without replacing the default styling classes that are already in place. The result is a button with two conflicting styles (btn-secondary btn-primary) and (at least in Edge) the first class takes precedence and is used for display.

The dom option is what is necessary to override the default styling but I can't figure out how to get it to apply to more than one button group.

allan

This is where Buttons set's the default class name for the Bootstrap 5 integration. If you wanted to change that, you could add:

DataTable.Buttons.defaults.dom.button.className = 'btn';

before you initialise the table.

Allan

mnbob70

Thank you Allan. I have three button groups and I added that line before the initialzation of the third group. In other words..

    DataTable.Buttons.defaults.dom.button.className = 'btn';
    new $.fn.dataTable.Buttons(relatedDocsTable, {

allan

Looks good

Allan