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