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-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"

In jquery $('#your_button_id').removeClass('btn-default'); — Ataur Rahman Munna
– Ataur Rahman Munna, Commented Jul 25, 2017 at 9:32
@DavidDomain that you would like to remove the default classes...? — davidkonrad
– davidkonrad, Commented Jul 25, 2017 at 18:08
@charley Just like i said in the comment above, i posted an answer. Just use the buttons.dom.button prop, which will give you total control over the tag and class-name creation. No need to do any JS hacks. — DavidDomain
– DavidDomain, Commented Aug 2, 2018 at 14:51

davidkonrad · Accepted Answer · 2018-09-06 02:11:40Z

53

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
  }]
}

edited Sep 6, 2018 at 2:11

answered Jul 25, 2017 at 18:04

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ansh Over a year ago

Yes, It Worked For me...:)

charley Over a year ago

@ansh I have worked out/found a MUCH Better solution now demo -> jsfiddle.net/aep2qfz5/22 From: datatables.net/forums/discussion/51001

Community · Accepted Answer · 2020-06-20 09:12:55Z

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>

Stefan · Accepted Answer · 2019-05-21 16:13:39Z

9

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

$.fn.dataTable.Buttons.defaults.dom.button.className = 'btn'; //'btn btn-primary'

answered May 21, 2019 at 16:13

Stefan

911 silver badge3 bronze badges

Comments

Merrin K · Accepted Answer · 2021-11-25 10:47:33Z

0

Try this

$('.dt-button').removeClass("dt-button");

answered Nov 25, 2021 at 10:47

Merrin K

1,7901 gold badge19 silver badges32 bronze badges

Comments

Hannan Ayub · Accepted Answer · 2017-07-25 10:07:01Z

-1

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

edited Jul 25, 2017 at 10:07

answered Jul 25, 2017 at 10:05

Hannan Ayub

4284 silver badges16 bronze badges

1 Comment

Philipp Sander Over a year ago

is your using jquery, don't use attr to modify classes.

Nick · Accepted Answer · 2017-12-07 12:38:08Z

-2

Use this code to hide Excel text on button:

 extend: 'excel',

 text: '',

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

edited Dec 7, 2017 at 12:38

Nick

1,2084 gold badges26 silver badges38 bronze badges

answered Dec 7, 2017 at 11:58

pawan kumar

1311 silver badge9 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related