如何在DataTables中更改搜索字段的宽度

Question

我可以在dataTables中更改搜索文本字段的宽度吗？

我现在正在写下面的代码，但它不工作。

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

        });

如果我的dataTables是像下面这样动态生成的：

$('#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"},
                                    ]
                            });
                            }

如何在这个动态创建的DataTable中添加按列搜索的搜索字段？

Answer 1

上面的解决方案对我都不起作用；然后我得到了这样的结果：

$(document).ready(function () {             
  $('.dataTables_filter input[type="search"]').css(
     {'width':'350px','display':'inline-block'}
  );
});

而且它工作得很完美！

如果您想将占位符也放入搜索框中，请使用此..

$('.dataTables_filter input[type="search"]').
  attr('placeholder','Search in this blog ....').
  css({'width':'350px','display':'inline-block'});

这肯定会起作用的。

Answer 2

要更改搜索框的宽度，我所要做的就是进入我的.css文件并输入以下内容：

.dataTables_filter input { width: 300px }

Answer 3

这对我很管用

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