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

in jquery.datatables.css for the selection .dataTables_wrapper .dataTables_filter input (line:288) add border : solid #ddd 1px; border-radius: 5px; or whatever you prefer . — mercury
– mercury, Commented Aug 26, 2016 at 4:20

Maxim Manco · Accepted Answer · 2012-02-28 18:02:39Z

5

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.

answered Feb 28, 2012 at 18:02

Maxim Manco

1,9441 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Keith Over a year ago

Thanks. Had to change to use oJUIClasses, but got there in the end.

Maxim Manco Over a year ago

@Keith sFilter is actually a property of oStdClasses. but, it's OK to use oJUIClasses as it extend oStdClasses.

Keith Over a year ago

On the datatables styling link you referenced, it says: $.fn.dataTableExt.oStdClasses - used when bJQueryUI is false $.fn.dataTableExt.oJUIClasses - used when bJQueryUI is true. As I'm using "bJQueryUI": true, I assumed that I would need to use oJUIClasses. Is there an equivalent of sFilter for oJUIClasses, or am I missing something?

Maxim Manco Over a year ago

$.fn.dataTableExt.oJUIClasses["sFilter"] = "my-style-class"; shoud work as well.

CashIsClay Over a year ago

I just want to point out that this answer doesn't exactly answer the question asked in the OP, even though Keith seems satisfied. The question is how to apply a class to the input, not how to style it. The difference comes when styling your DataTables to work with an existing CSS framework such as Bootstrap, which may call for something like "input-small" being a class on the input field itself.

|

mpdc · Accepted Answer · 2014-04-07 15:29:32Z

5

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

answered Apr 7, 2014 at 15:29

mpdc

3,5705 gold badges30 silver badges49 bronze badges

Collectives™ on Stack Overflow

Jquery Datatables:set the class on the filter input field

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related