datatables - change button style

Question

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

davidkonrad · Accepted Answer · 2018-03-20 15:21:36Z

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;
}

Max · Accepted Answer · 2020-08-20 07:01:35Z

If you are working with the bootstrap 4 taste of DataTables the buttons automatically have class btn-secondary.
Using the dom option you lose the bootstrap design altogether.
You can however add classes like so:

myTable = $('#myTableId').DataTable({
    buttons: [
      { extend: 'colvis', className: 'btn-outline-secondary' },
      { extend: 'excel', className: 'btn-outline-secondary' }
]});

But for me this didn't change the button design because the btn-secondary was still there. So I removed it manually afterwords.

  setTimeout(function () {
    $oTable.buttons().container().addClass('ml-2').appendTo('#myTableId_length'); //attach buttons to table length choser
    $oTable.buttons().container().find('.btn').removeClass('btn-secondary'); //remove class btn secondary
  }, 500);

This is wrapped in a time-out to make sure, everything has been rendered before.

Collectives™ on Stack Overflow

datatables - change button style

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related