change button's color

change button's color

wijwijwijwij Posts: 52Questions: 11Answers: 0

Hi,
I managed to change the color of the button using : className: 'btn btn-success'
The problem is when I select any row in the data table, the button reset to its default color (light grey)
any help will be appreciated

This question has an accepted answers - jump to answer

Answers

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

    It seems to be behaving here: http://live.datatables.net/vasowohi/1/edit . Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

    Cheers,

    Colin

  • wijwijwijwij Posts: 52Questions: 11Answers: 0

    Thanks, Colin for your answer. Here is my code:

     select: { style: 'single' },
                    buttons: [
    
                        { extend: "edit", text:"Select",editor: sprodEditor,name:"sedit" },
                        {
                            extend: "selectedSingle",
                            text: 'Agree', name:"agr",
                            className: 'btn btn-success',
                            action: function (e, dt, node, config) {                      
                                editor
                                    .edit(sprodTable.row({ selected: true }).index(), false)
                                    .set('proce',"A")
                                    .submit();                        
                            }
                        },
                        {
                            extend: "selectedSingle",
                            text: 'Refuse', name:"ref",
                            className: 'btn btn-danger',
                            action: function (e, dt, node, config) {                           
                                editor
                                    .edit(sprodTable.row({ selected: true }).index(), false)
                                    .set('proce',"R")
                                    .submit();                           
                            }
                        },
    
                    ]
    

    When I compared it to your sample code, I found it identical, but not sure why it is not working on my side
    May be it is because I am using Bootstrap class for the button "btn btn-danger'?
    Am I missing anything?

  • wijwijwijwij Posts: 52Questions: 11Answers: 0

    Hi Colin,
    Nevermind, I found a topic here that helped me figure it out.

    For whoever facing the same problem, here is what I did:
    I added those 2 lines above the Editor initialization

     $.fn.dataTable.Editor.classes.form.button = "btn";
     $.fn.dataTable.Buttons.defaults.dom.button.className = 'btn';
    

    and that was it!

    Thanks Colin

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

    Ah that's it, good find!

    Colin

This discussion has been closed.