Comment remplacer le style de bouton par défaut des boutons de données angulaires

Question

Lorsque j'ajoute des boutons à mes données angulaires, ils les créent avec le thème par défaut, ce qui provoque une différence entre les boutons et le reste de ma page (voir bouton Colonne Visibilité) dans l'image ci-dessous):

J'ai essayé de jouer avec CSS pour obtenir les boutons pour imiter les boutons bootstrap (comme les autres boutons de la page), mais je ne suis pas avoir beaucoup de chance. J'ai essayé d'ajouter mes valeurs CSS à button.dt-button, div.dt-button, a.dt-button {} mais j'ai dû tout remplacer par !important ce qui ne me semblait pas correct.

J'ai également essayé d'ajouter bower_components/datatables/media/css/buttons.bootstrap.css à ma page <links> mais il n'a également eu aucun effet.

Existe-t-il un moyen assez simple d'y parvenir?

Answer 1

J'utilise pour supprimer les références dt-button. dt-button semble causer tous les problèmes. Il s'agit de la tentative de dataTables de styliser différentes balises à un aspect de bouton unifié, ce qui est en conflit avec bootstrap. Donc, pour avoir des boutons de datatables qui ressemble le reste de la mise en page de BS3 ajouter des classes bootstrap à className:

.withButtons([ 
    { extend: 'pdf', 
    className: 'btn btn-sm btn-primary' 
    } 
]) 

et supprimer toute référence dt-button dans initComplete:

.withOption('initComplete', function() { 
    $('.dt-button').removeClass('dt-button') 
}) 

Cela garantit que les boutons est pur BS sans style supplémentaire. Je suis sûr que c'est pas le "bon" moyen de le faire. En théorie, il devrait y avoir une combinaison de travail de withBootstrap() et withButtons() avec des versions de paquet adéquates, mais n'ont jamais réussi à en trouver un avec succès. Je reçois tous les paquets par CLI et je ne veux pas me mêler avec des paquets manuellement.

datatables.net 
datatables.net-bs 
datatables.net-buttons 
angular-datatables 

Je crois que les paquets .net ont une priorité faible par rapport à datatables constructeur de téléchargement, cdn et GitHub. Ils ne sont pas synchronisés.

Answer 2

Vous devrez ajuster en conséquence, mais dans mon cas, j'ajouté:

display: inline; 

à la css des éléments sur la gauche qui flottent au-dessus. Dans mon cas (jQuery/Rails/Bootstrap) j'ajoutais des boutons et le thème Bootstrap gâchait aussi les choses (comme mentionné ci-dessus).

Pour les points de bonus que vous pouvez remplacer les classes CSS par défaut sur les éléments:

https://datatables.net/reference/option/buttons.dom

Donc dans mon cas (notation CoffeeScript):

$ -> 

    locations = $('#locations').dataTable 
    dom: 'Bfrtip' 
    ajax: 
     url: $('#locations').data('source') 
     type: 'GET' 
    order: [[ 3, 'desc' ], [ 2, 'desc' ]] 
    processing: true 
    serverSide: false 
    responsive: false 
    buttons: 
     dom: 
     container: 
      className: 'btn-group' 
     button: 
      className: 'btn btn-primary btn-outline' 

Cela se débarrasse de la dt-buttons et dt-button qui permet à la BS BS de base de fonctionner correctement.

<div class="btn-group"> 
    <a class="btn btn-primary btn-outline buttons-copy buttons-html5" tabindex="0" aria-controls="locations" href="#"> 
    <span>Copy</span></a> 
    <a class="btn btn-primary btn-outline buttons-pdf buttons-html5" tabindex="0" aria-controls="locations" href="#"> 
    <span>PDF</span></a> 
</div> 

Ceci affiche ensuite les boutons BS appropriés.