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)

Th

Answer 1

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

Answer 2

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.

Answer 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");
},