How do i change the default buttons with bootstrap buttons

vaishnavkoka

Look at the datatable :
http://live.datatables.net/mejexoza/1/edit
I would like to change the default buttons of all the 5 buttons with a different bootstrap button where each one would be a unique.
I have used this one as a reference but it didnt help me out :
https://jsfiddle.net/48rcjrw3/94/

Thanks
Koka

colin

I think you were using the wrong libraries, and not including the bootstrap CSS files for the buttons extension. See this example here: http://live.datatables.net/honotobe/1/edit

C

vaishnavkoka

Hi Colin,
But How do i change those buttons to something as mentioned below
<button type="button" class="btn">Basic</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-link">Link</button>
In short i want to change those buttons and instead make use of these buttons

Thanks
Koka

colin

Hi @vaishnavkoka ,

In that fiddle in your original mail, the reference one, it's adding classes to a button, so you could do that. You're not doing that in your own fiddle.

Alternatively, you could use buttons.buttons.className to specify a class when the button is created.

Cheers,

Colin

vaishnavkoka

Hi Colin,
Thanks for reply, i tried this code
buttons: { buttons: [ { extend: 'copy', className: 'btn btn-success'}, { extend: 'excel', className: 'excelButton' } ]},
but it didnt work out
http://live.datatables.net/beyekata/1/edit

Thanks
Koka

colin

You had one too many layers of buttons - see modified example : http://live.datatables.net/hufudiru/1/edit

This has the classes in as expected.

Cheers,

Colin

vaishnavkoka

Hi Coling,
But you didnt change the default buttons to `btn btn-success' (bootstrap buttons), I would like to know how would you achieve this.

Thanks
Koka

colin

I may be missing something, but can't you just add those classes to buttons.buttons.className

C

a3pl

I had the same problem and solved it overwriting default class for button like this:

http://live.datatables.net/hufudiru/2/edit

vaishnavkoka

This exactly what i was looking for thank you @a3pl .

Regards
Koka