How can I remove default button class of a dataTables button?
Changing the default class for all buttons in Datatable (Updated fiddle)
$.fn.dataTable.Buttons.defaults.dom.button.className = 'btn'; //'btn btn-primary'
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
}]
}
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>