[英]How can I change default css of “datatable” print button?
我如何更改datatable插件中的print和excel按鈕的css。
$('#order_table').DataTable({
dom: 'Brtip',
buttons: [
'print','excel'
]
});
});
每個按鈕都有一個獨特的基類.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-default
替換為.btn-primary
:
$('.buttons-excel, .buttons-print').each(function() {
$(this).removeClass('btn-default').addClass('btn-primary')
})
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
讓我知道這是否有幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.