Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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"

like image 347
ansh Avatar asked Jul 25 '17 09:07

ansh


3 Answers

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
  }]
}
like image 120
davidkonrad Avatar answered Nov 11 '22 03:11

davidkonrad


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>
like image 44
DavidDomain Avatar answered Nov 11 '22 02:11

DavidDomain


Changing the default class for all buttons in Datatable (Updated fiddle)

$.fn.dataTable.Buttons.defaults.dom.button.className = 'btn'; //'btn btn-primary'
like image 25
Stefan Avatar answered Nov 11 '22 02:11

Stefan