How can we change width of search fields in DataTables

Question

Can I change the width of search text fields in dataTables ?

I am writing following code right now but it is not working.

$('#example').dataTable()
          .columnFilter({   sPlaceHolder: "head:before",
                    aoColumns: [    { type: "text",width:"10px" },
                                { type: "date-range" },
                                                { type: "date-range" }
                        ]

        });

And if my dataTables is dynamically generated like as gven below:

$('#example').dataTable({
                                "aaData": aDataSet,
                                "aoColumns": [
                                    { "sTitle": "#","sWidth": "10px" },
                                    { "sTitle": "ID" },
                                    { "sTitle": "Staff Name" },
                                    { "sTitle": "Rig Days" },
                                    { "sTitle": "Manager"},
                                    { "sTitle": "Grade"},
                                    { "sTitle": "Tools"},
                                    { "sTitle": "Vacations"},
                                    { "sTitle": "Presently On"},
                                    ]
                            });
                            }

How to add Search field in this dynamically created DataTable to search by each column?

Answer 1

To change the search box width, all I had to do was go into my .css file and enter the following:

.dataTables_filter input { width: 300px }

Answer 2

it's worked for me

    <script>
    var datatable = $('#table').DataTable({
    ...<datatables properties>,
    initComplete: function () {
    $('.dataTables_filter input[type="search"]').css({ 'width': '350px', 'display': 'inline-block' });
    }
</script>