web-dev-qa-db-fra.com

Comment supprimer la classe de boutons par défaut d'un bouton dataTables?

J'utilise Data table avec Button. Je veux montrer le bouton Réussite plutôt par défaut. J'ai essayé ce code

buttons: [
{
extend: "Excel",
className: "btn-sm btn-success",
titleAttr: 'Export in Excel',
text: 'Excel'
}]

Ce code fonctionne mais cela ajoute la classe btn-success, mais je veux d'abord supprimer la classe btn-default, puis ajouter la classe success.

Classes actuelles: "btn btn-default buttons-Excel buttons-html5 btn-sm btn-success"

Ce que je veux : "btn buttons-Excel buttons-html5 btn-sm btn-success"

javascriptjquerytwitter-bootstrapdatatables
13
ansh

Oui, cela peut être vraiment ennuyeux. C'est la même chose sans utiliser bootstrap, où .dt-button est toujours ajouté même si vous déclarez className. Il y a un rappel init que vous pouvez utiliser pour modifier par exemple des 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')
    }
  }]
});

démo -> https://jsfiddle.net/m6hysypd/

Mise à jour : ont reçu beaucoup de votes positifs à ce sujet, mais les corrects ou la meilleure réponse est en fait la réponse de "DavidDomains" ci-dessous . Utilisation

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

Vous devriez jeter un œil au buttons.dom.button option.

buttons.dom.button

Cette option contrôle la balise HTML utilisée pour créer chaque bouton individuel. Avec cette option, le type de tag et le nom de classe peuvent être spécifiés en utilisant les propriétés tag et className de cet objet.

Cela vous donnera un contrôle total sur la façon dont le bouton sera rendu dans le DOM. Pas besoin de supprimer les classes par la suite.

Voici un exemple.

$('#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>
18
DavidDomain

Modification de la classe par défaut pour tous les boutons dans Datatable (mise à jour violon )

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