datatables ajouter une classe pour les filtres

Je suis actuellement à la recherche d'une méthode pour ajouter une classe personnalisée pour le jQuery datatables filtres (Enregistrements par page et de Recherche)

Ces éléments de rendu comme suit:

<div id="DataTables_Table_0_length" class="dataTables_length">
    <label>
        <select size="1" name="DataTables_Table_0_length" 
                aria-controls="DataTables_Table_0">
            <option value="10" selected="selected">10</option>
            <option value="25">25</option><option value="50">50</option>
            <option value="100">100</option>
        </select>
        records per page
    </label>
</div>

et 

<div class="dataTables_filter" id="DataTables_Table_0_filter">
    <label>
        Search: <input type="text" aria-controls="DataTables_Table_0">
    </label>
</div>

Personne ne sait comment je peux ajouter une classe supplémentaire à chacun d'eux? Certains conseillent serait comme d'habitude très apprécié.

InformationsquelleAutor nickyfsh | 2013-05-20
  1. 14

    Découvrez http://legacy.datatables.net/styling/custom_classes. DataTables est un peu compliqué pour remplacer les classes CSS pour certains des éléments de base. Voici une façon

    $(document).ready(function() {
    var extensions = {
        "sFilter": "dataTables_filter custom_filter_class",
        "sLength": "dataTables_length custom_length_class"
    }
    //Used when bJQueryUI is false
    $.extend($.fn.dataTableExt.oStdClasses, extensions);
    //Used when bJQueryUI is true
    $.extend($.fn.dataTableExt.oJUIClasses, extensions);
    $('#example').dataTable();
});

    Découvrez un exemple ici: http://jsfiddle.net/k2ava/3/.

    • Merci, très reconnaissants de votre solution!
    • Le problème que je vois c'est que ce n'est pas le <div> lui-même, vous voulez style, mais le <input> balise elle-même. Il ne semble pas que nous avons un moyen de modifier ces.
    • votre réponse donne la solution pour moi, merci.
    • J'ai besoin de la façon dont vous le voulais. J'ai ajouté la balise d'entrée dans le css. Cochez cette JSFiddle démo
    • Si quelqu'un à la recherche de l'ajout d'une classe de champ de saisie seul, de le faire simplement avec jquery comme, $(".dataTables_filter input").addClass('custom-class)
    InformationsquelleAutor Nick Fishman
  2. 13

    je suis l'utiliser DataTable 1.10.2 et j'utilise :

    $.extend( $.fn.dataTableExt.oStdClasses, {
    "sFilterInput": "form-control",
    "sLengthSelect": "form-control"
});

    Je passe par la mesure de la fonction au lieu de jquery.

    • Génial, merci! Fonctionne comme un charme
    • Mieux que la accepté de répondre.
    • Génial, c'est une bonne approche
    InformationsquelleAutor Breith
  3. 2

    Cela peut aussi être fait facilement avec jQuery en utilisant fnDrawCallback. Ici, j'ai ajouter deux classes de style pour Bootstrap

    fnDrawCallback: function( oSettings ) {
$('div#oTable_length select, div#oTable_filter input').addClass("form-control input-sm");
},
    InformationsquelleAutor eggs