如何使用Bootstrap5更改数据表按钮颜色？

Question

我正在使用数据表插件创建网站。 我想改变按钮的颜色，但不知道方法。 这是我的代码。

 $(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>>"
    });
    
});

当前按钮颜色。 当前按钮颜色。

谢谢！

Answer 1

您应该能够通过扩展按钮并添加

className

属性来完成此操作。

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

Answer 2

您可以通过覆盖数据表添加的默认值

className

来实现此目的。

为此，您需要覆盖

$.fn.dataTable.Buttons.defaults

。

您可以定义您想要的默认

className

，或将其保留为空

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

然后你可以在透视按钮中添加你自己的类

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

这会覆盖默认类，而不是添加到它。

Answer 3

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