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

Question

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

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

它是当前按钮的颜色。 current button color.

谢谢！

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