CODEWITHSUNDEEP
datatables
chacha
chacha

Reputation: 23

How to change Datatables button color with Bootstrap5?

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!

Upvotes: 2

Views: 3370

Answers (3)

ahmad zainal
ahmad zainal

Reputation: 1

$.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';

Upvotes: 0

Rohan
Rohan

Reputation: 19

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.

Upvotes: 0

mark_b
mark_b

Reputation: 1481

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']
    }
],

Upvotes: 2

Related Questions