How to apply custom button color to File Export buttons collections?

eshwar12

I tried in the following way but its not working.

buttons:
                    [
                        {
                            extend: 'collection',
                            text: 'Export',
                            buttons: ['pdf','print',  'excel']
                        }
                    ]
                    dom:
                    {
                        button: {
                            tag: "button",
                            className: "btn btn-primary"
                        },
                        buttonLiner: { tag: null }
                    }

colin

Hi @eshwar12 ,

The fix is to move the className into the button declaration, so something like:

buttons: [
  { extend: 'pdf', className: 'btn-primary' },
  ...
]

Cheers,

Colin

eshwar12

"ordering": true,
"info": true,
"colReorder": true,
dom: 'Blfrtip',
buttons:
[
{
extend: 'collection',
text: 'Export',
buttons: [
{ extend: 'pdf', className: 'btn-primary' },
{ extend: 'print', className: 'btn-primary' },
{ extend: 'excel', className: 'btn-primary' }
]
}
]
Hi Colin,
I tried the way you have mentioned, but there is no change in button appearance.

colin

Hi @eshwar12 ,

Take a look at this example here, it's changing the height of the button based on the class. Could you change this example to demonstrate your problem, please.

Cheers,

Colin

eshwar12

I made the changes to that example and I want to display Export and PDF buttons in blue color using (btn-primary)

http://live.datatables.net/medusiho/1/edit

kthorngren

I believe btn-primary is a Bootstrap class. The example you and Colin are working from does not have Bootstrap. Does your page load Bootstrap?

The second issue is that you also need to add className: 'btn-primary' in the button definition for the Export collection.

This example has both Bootstrap and className: 'btn-primary' in both the Export and PDF definitions.

http://live.datatables.net/yonakowu/1/edit

Kevin

eshwar12

Thank you Kevin and Colin, It's working now