我们如何更改数据表中搜索字段的宽度

问题描述

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

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" }
                        ]

        });

如果我的数据表是像下面的 gven 那样动态生成的:

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"},
                                    ]
                            });
                            }

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

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

推荐答案

以上解决方案都不适合我；然后我得到了这个:

None of the above solution worked for me; then I got this:

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

而且效果很好！

如果您想在搜索框中也放置一个占位符，请使用此 ..

If you want to place a placeholder too inside the search box use this ..

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

这肯定会奏效.

这篇关于我们如何更改数据表中搜索字段的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！