Answers

• colin Posts: 15,177Questions: 1Answers: 2,590

  April 2023

  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 Posts: 19Questions: 2Answers: 0

  April 2023

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  April 2023 Answer ✓

  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 Posts: 19Questions: 2Answers: 0

  April 2023

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  April 2023

  Looks good

  Allan