CODEWITHSUNDEEP
jquerydatatables
Keith
Keith

Reputation: 801

Jquery Datatables:set the class on the filter input field

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

Upvotes: 5

Views: 22395

Answers (2)

mpdc
mpdc

Reputation: 3570

$('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.

Upvotes: 5

Maxim Manco
Maxim Manco

Reputation: 1944

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.

Upvotes: 5

Related Questions