How can I remove default button class of a dataTables button?

Question

I am using Data table with Button. I want to show Success button rather default. I tried this Code

buttons: [
{
extend: \"excel\",
className: \"btn-sm btn-su         


        

Answer 1

You should take a look at the buttons.dom.button option.

buttons.dom.button

This option controls the HTML tag that is used to create each individual button. With this option the tag type and class name can be specified using the tag and className properties of this object.

This will give you total control on how the button will be rendered in the DOM. No need to remove any classes afterwards.

Here is an example.

$('#example').DataTable( {
  dom: 'Bfrtip',
  buttons: {
    dom: {
      button: {
        tag: 'button',
        className: ''
      }
    },
    buttons: [{
      extend: 'excel',
      className: 'btn btn-sm btn-success',
      titleAttr: 'Excel export.',
      text: 'Excel',
      filename: 'excel-export',
      extension: '.xlsx'
    }, {
      extend: 'copy',
      className: 'btn btn-sm btn-primary',
      titleAttr: 'Copy table data.',
      text: 'Copy'
    }]
  }
});

  

    

      
Name
      
Position
      
Office
      
Age
      
Start date
      
Salary
    
  
  

    

      
Name
      
Position
      
Office
      
Age
      
Start date
      
Salary
    
  
  

    

      
Tiger Nixon
      
System Architect
      
Edinburgh
      
61
      
2011/04/25
      
$320,800
    
    

      
Garrett Winters
      
Accountant
      
Tokyo
      
63
      
2011/07/25
      
$170,750
    
    

      
Ashton Cox
      
Junior Technical Author
      
San Francisco
      
66
      
2009/01/12
      
$86,000
    
    

      
Cedric Kelly
      
Senior Javascript Developer
      
Edinburgh
      
22
      
2012/03/29
      
$433,060
    
    

      
Airi Satou
      
Accountant
      
Tokyo
      
33
      
2008/11/28
      
$162,700