How to change Datatables button color with Bootstrap5?

Question

I am creating websites with Datatables plug-in. I want to change the button color, but I don't know the methods. It is my code.

 $(document).ready(function() {
    $('#reportTable').DataTable({
       
        buttons: [
       
        'searchPanes',
        'colvis',
        {
      
            extend: 'print',
            split: [ 'pdf', 'excel','csv'],
        }
        ],
        select: {
            style:    'multi',
            selector: 'td:first-child'
        },
        fixedHeader: true,
        columnDefs: [ { targets: [0,1,2,3,4,7,10], visible: true}, 
                      { targets: '_all', visible: false }, 
                      {
                        orderable: false,
                        className: 'select-checkbox',
                        targets:   0
                    }
                      ],
        "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
        order: [[7, 'desc']],
        
        "dom": "<'row mb-3'<'col-6 col-md-4'l><'col-6 col-md-4 'B><'col-6 col-md-4'f>>" + 
        "<'row my-4'<'col-sm-12'tr>>" +
        "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"
    });
    
});

It is the current button color. current button color.

Thank you!

mark_b · Accepted Answer · 2022-07-29 08:46:04Z

2

You should be able to do it by extending the button and adding a className property.

buttons: [
    {
        extend: 'searchPanes',
        className: 'btn btn-danger'
    },
    {
        extend: 'colvis',
        className: 'btn btn-warning',
    },
    {
        extend: 'print',
        className: 'btn btn-success',
        split: ['pdf','excel','csv']
    }
],

answered Jul 29, 2022 at 8:46

mark_b

1,49312 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rohan Garg · Accepted Answer · 2024-07-05 09:13:54Z

0

You can do this by overriding the default className added by Datatables.

For this, you need to overwrite $.fn.dataTable.Buttons.defaults.

You can define the default className you want, or keep it empty

// Global Options
$.extend($.fn.dataTable.Buttons.defaults.dom.button,{
    className: 'btn'
});

And then you can then add your own classes in perspective buttons

// Table specific options
buttons: [
    {
        extend: 'print',
        className: 'btn-primary'
    },
    {
        extend: 'pdf',
        className: 'btn-warning',
    },
]

This overrides the default class instead of adding to it.

answered Jul 5, 2024 at 9:13

Rohan Garg

191 silver badge6 bronze badges

Comments

ahmad zainal · Accepted Answer · 2024-09-11 15:08:49Z

0

$.fn.DataTable.Buttons.defaults.dom.button.className = 'btn';
$.fn.DataTable.Buttons.defaults.dom.split.action.className = 'btn';
$.fn.DataTable.Buttons.defaults.dom.split.dropdown.className = 'btn';

answered Sep 11, 2024 at 15:08

ahmad zainal

1

1 Comment

SmellyCat Over a year ago

The question is how to set the button colour. This code-only answer could be improved with an explanation as to how and when this code sets button colour.

Collectives™ on Stack Overflow

How to change Datatables button color with Bootstrap5?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related