如何更改「datatable」打印按鈕的默認css？

Question

如何更改數據表插件中的print和excel按鈕的css。

    $('#order_table').DataTable({ 
         dom: 'Brtip', 
         buttons: [ 
          'print','excel' 
         ] 
        }); 
       }); 

Answer 1

每個按鈕都有一個唯一的基類.buttons-print，.buttons-excel，.buttons-copy等，所以你可以用CSS樣式直接的按鈕

.buttons-print { 
    background-color: red; 
    color: white; 
} 
.buttons-excel { 
    background-color: blue; 
    color: white; 
} 

演示 - >https://jsfiddle.net/mg28pxe2/

---

用.btn-primary代替.btn-default：

$('.buttons-excel, .buttons-print').each(function() { 
    $(this).removeClass('btn-default').addClass('btn-primary') 
}) 

演示 - >https://jsfiddle.net/48rcjrw3/

Answer 2

var orderDataTable = $('#order_table').DataTable({ 
         dom: 'Brtip', 
         buttons: [ 
          'print','excel' 
         ] 
        }); 



    var tableTools_obj = new $.fn.dataTable.TableTools(orderDataTable , { 
        "sSwfPath": "swf/copy_csv_xls_pdf.swf", 
        "aButtons": [       
          { 
           "sExtends": "xls", 
           "sTitle": "OrdersReport", 
           "sToolTip": "Export to Excel", 
           "sButtonClass": "btn btn-transparent btn-primary btn-toolbar", // Here you can give all the classes realated to button with custom styles. 
           "sButtonText": "<i title='Export To Excel' class='ace-icon fa fa-file-excel-o white icon-tooltip'></i>", //overriding the default icon of Datatables, Here I am using Fontawsome icons 
           // "mColumns": GetExportableColumnsIndexes(); //this is to filter out hidden or unwanted columns form being exported. 
           // Usually it requires array on indexes, I prefer to call a function with some logic handling and returning the required indexes. 
          } 
         ] 
        }); 

爲此，您必須添加數據表的TableTools插件。 http://www.datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js

讓我知道這是否有幫助。