change button's color

wijwij

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

colin

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

wijwij

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?

wijwij

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

colin

Ah that's it, good find!

Colin