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"
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>
Changing the default class for all buttons in Datatable (Updated fiddle)
$.fn.dataTable.Buttons.defaults.dom.button.className = 'btn'; //'btn btn-primary'
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With