Jquery Datatables:set the class on the filter input field

Question

How can I set the class on the 'search' field on the datatables plugin please. I'm using the Jquery UI theme as well.

        $('#idSmovData').dataTable( {
             "sScrollY": "600px"
            ,"bPaginate": false
            ,"bFilter": true
            ,"bJQueryUI": true
            ,"bInfo": false
            ,"bSort": false
        });

Answer 1

You can set the search filter wrapper div style class using oStdClasses

$.fn.dataTableExt.oStdClasses["sFilter"] = "my-style-class";

And than use regular css to target the search input field:

.my-style-class input[type=text] {
     color: green;
}

Please refer to the datatables styling section for more details.

Answer 2

$('div.dataTables_filter input').addClass('form-control');
$('div.dataTables_length select').addClass('form-control');

Here I am adding the Bootstrap class form-control to the filter input and the length select, as an example.