How can I remove default button class of a dataTab

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-success",
titleAttr: 'Export in Excel',
text: 'Excel'
}]

This code is working but this is adding btn-success class, But I want to remove the btn-default class first and then add the success class.

Current Classes: "btn btn-default buttons-excel buttons-html5 btn-sm btn-success"

What I want : "btn buttons-excel buttons-html5 btn-sm btn-success"

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'
    }]
  }
});

<link href="https://cdn.datatables.net/v/bs-3.3.7/jszip-3.1.3/pdfmake-0.1.27/dt-1.10.15/b-1.3.1/b-html5-1.3.1/b-print-1.3.1/datatables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/bs-3.3.7/jszip-3.1.3/pdfmake-0.1.27/dt-1.10.15/b-1.3.1/b-html5-1.3.1/b-print-1.3.1/datatables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
  </tbody>
</table>

Answer 2

Maybe this can help

$('.dt-button').attr("class","btn-success");

Add this to jquery after loading Datatables

Or you can make your own css class and mark the require attributes as !important to override the default style

Answer 3

Use this code to hide Excel text on button:

 extend: 'excel',

 text: '',

 className: "btn btn-info btn-sm  glyphicon glyphicon-list-alt",

Answer 4

Yes, this can be really annoying. It is the same without using bootstrap, where .dt-button always is added even if you declare className. There is a init callback you can use to modify for example classes :

$('#example').DataTable( {
  dom: 'Bfrtip',
  buttons: [{
    extend: "excel",
    className: "btn-sm btn-success",
    titleAttr: 'Export in Excel',
    text: 'Excel',
    init: function(api, node, config) {
       $(node).removeClass('btn-default')
    }
  }]
});

demo -> https://jsfiddle.net/m6hysypd/

---

Update: Have received a lot of upvotes on this, but the correct or best answer is actually "DavidDomains"'s answer below. Use

buttons: {
  dom: {
    button: {
      className: ''
    }
  },
  buttons: [{
    //here comes your button definitions
  }]
}