How do i change the default buttons with bootstrap buttons

How do i change the default buttons with bootstrap buttons

vaishnavkokavaishnavkoka Posts: 132Questions: 23Answers: 1

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

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • vaishnavkokavaishnavkoka Posts: 132Questions: 23Answers: 1

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • vaishnavkokavaishnavkoka Posts: 132Questions: 23Answers: 1

    Hi Colin,
    Thanks for reply, i tried this code :smile:
    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • vaishnavkokavaishnavkoka Posts: 132Questions: 23Answers: 1

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    C

  • a3pla3pl Posts: 4Questions: 1Answers: 1
    Answer ✓

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

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

  • vaishnavkokavaishnavkoka Posts: 132Questions: 23Answers: 1

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

    Regards
    Koka

This discussion has been closed.