CODEWITHSUNDEEP
angularjsangular-datatables
Arter
Arter

Reputation: 2324

datatables - change button style

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

Upvotes: 3

Views: 9050

Answers (2)

Max
Max

Reputation: 2643

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.

Upvotes: 0

davidkonrad
davidkonrad

Reputation: 85578

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

Upvotes: 2

Related Questions