Issue
is there any way to change button style (colvis, copy, print, excel) in angularjs datatables.
vm.dtOptions = DTOptionsBuilder.newOptions().withButtons([
'colvis',
'copy',
'print',
'excel'
]);
Only way I can do this is directly in source code, but this is not good way. here is solution with jquery, but this doesn't have any effect in DOM
$('#myTable').DataTable( {
buttons: {
buttons: [
{ extend: 'copy', className: 'copyButton' },
{ extend: 'excel', className: 'excelButton' }
]
}
} );
css
.copyButton {
background-color: red
}
.excelButton{
background-color: red
}
Thank you
Solution
Simply replace a button identifier with a literal and add className
:
.withButtons([
'colvis',
{ extend: 'copy', className: 'copyButton' },
'print',
{ extend: 'excel', className: 'excelButton' }
]);
This works for a "clean" setup, but you are probably including all default stylesheets there is.
DataTables use by default an <a>
tag and style it to look like a button through a .dt-button
class which have a lot of pseudo class styling for :hover
and so on. This makes it complicated to change for example the background, you'll need additional hackish CSS.
Also, DataTables itself already injects unique classes for each button type like .buttons-excel
which you could take benefit of.
I will suggest you completely reset the default behaviour through the dom
option:
.withButtons({
dom: {
button: {
tag: 'button',
className: ''
}
},
buttons: [
'colvis',
'copy',
'print',
'excel'
]
})
Now you can style for example .buttons-excel
nicely from scratch :
.buttons-excel {
background-color: red;
color: white;
border: 1px outset;
}
.buttons-excel:hover {
background-color: pink;
}
Answered By - davidkonrad
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.