Bootstrap 4 - buttons remain secondary also if overriden with primary

carlop

Hello, please refer to
https://www.nfctech.eu/datatables-bootstrap4-button-lenght/testcase/
that make use of the last version of Datatables package.
https://datatables.net/download/#bs4/jszip-2.5.0/dt-1.10.18/e-1.9.0/b-1.5.6/b-html5-1.5.6/fh-3.1.4/r-2.2.2/sl-1.3.0
The excel button still appears as secondary (see attached image) also if it as been overwritten as btn-primary

buttons: [
          {extend: 'excel', title: null, text: '<i class="far fa-file-excel"></i>',
            exportOptions: {
              columns: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
              modifier: {selected: null}
            },
            className: 'visible-lg-inline-block btn-primary'
          }
        ]
} );

Any suggestion to solve this issue?
Thanks

colin

Hi @carlop ,

This SO thread here has a couple of solutions - one is to remove the class in the buttons.buttons.init, the other is to change the classname in buttons.dom.button. Hope that does the trick for you,

Cheers,

Colin

carlop

Hi Colin, thanks, it worked.
Why the previous method of just adding the class in

buttons: [
          {extend: 'excel', title: null, text: '<i class="far fa-file-excel"></i>',
            exportOptions: {
              columns: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
              modifier: {selected: null}
            },
            className: 'visible-lg-inline-block btn-primary'
          }
        ]
} );

does not work anymore?
Thanks again.

allan

The class name gets added, rather than overridden. If that worked before, it was a bug .

Allan

carlop

Hi Allan, I found another solution envisaged by you in a previous discussion
https://datatables.net/forums/discussion/43723/how-can-i-remove-default-button-class-of-datatable-btn-default
that is

$.fn.dataTable.Buttons.defaults.dom.button.className = 'btn';

for Datatables

$.fn.dataTable.Editor.classes.form.button = "btn";

for the Editor form
It works fine and according to me has the advantage of a simple and compact code.
Is this solution still deemed acceptable also with Bootstrap 4?
Thanks

allan

Yes - that looks spot on!

Allan