datatables add class to filters

Question

I am currently seeking a method to add an additional custom class to the jQuery datatables filters (Records per page and Search)

These items render as follow:

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

and

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

Does anyone know how I can best add an additional class to each of them? Some advise would be as usual very much appreciated.

score 18 · Accepted Answer · edited Jul 21 '14 at 14:15

18

Check out http://legacy.datatables.net/styling/custom_classes. DataTables has a slightly complicated way to override the CSS classes for some of the core elements. Here's one way

$(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();
});

Check out a working example here: http://jsfiddle.net/k2ava/3/.

edited Jul 21 '14 at 14:15

Community

1
1

answered May 20 '13 at 08:59

Nick Fishman

654
5
12

1

The problem I see with this is that it's not the `
` itself you want to style usually, but the `` tag itself. It doesn't look like we have a way of amending these.
– mpdc Apr 07 '14 at 15:20
@mpdc I need the way you wanted too. I've added the input tag in css. Check this [JSFiddle demo](http://jsfiddle.net/k2ava/102/) – Lucky May 11 '16 at 13:34
If someone looking for just adding a class to input field alone, do it simply with jquery like, `$(".dataTables_filter input").addClass('custom-class)` – Lucky Jul 14 '16 at 08:11

score 17 · Answer 2 · answered Aug 17 '14 at 19:04

17

i'm use DataTable 1.10.2 and i use :

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

I go through the extend function instead of jquery.

answered Aug 17 '14 at 19:04

Breith

2,160
1
23
32

score 3 · Answer 3 · answered Mar 18 '14 at 14:53

3

This can also be easily done with jQuery using fnDrawCallback. Here I add two classes to style for Bootstrap

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

answered Mar 18 '14 at 14:53

eggs

331
1
4
10

datatables add class to filters

3 Answers3

Linked