jquery-datatables - 如何调整 jquery 数据表的列过滤器插件控件的大小

Question

如何调整 jquery 数据表的列过滤器插件控件的大小。

我将下面的代码用于列过滤器插件，但它没有改变......

 $("table#tblOscarNominees").dataTable().columnFilter(
            {
                //sPlaceHolder: "foot:before",
                "aoColumns": [
                                null, //{ "type": "number-range" },
                                {"type": "text", width: "50px" },
                                { "type": "select" },
                                { "type": "text", width: "50px" },
                                {"type": "number-range", width: "50px" },
                                { "type": "select" },
                                { "type": "select" },
                                { "type": "date-range", width: "50px" },
                                ]
            });

有关更多详细信息，请参阅此链接

http://www.reddyinfosoft.blogspot.in/2012/12/jquery-datatable-plugin-in-aspnet-using.html

Answer 1

这对我有用：

$('#my-table th').bind('mouseup', function(event){
  var index = $(this).parent().children().index($(this));
  var colWidth = $(this).css('width');
  var input = $('#my-table tfoot tr input:eq(' + index +')');
  input.css("width", colWidth);
});

您仍然需要在表格构建后立即设置输入宽度：

$('#change-table tfoot tr').find(':input').each(function(index){
  var colWidth = $('#my-table thead tr th:eq(' + index + ')').css('width');
  $(this).css("width", colWidth );
});

Answer 2

您还可以做两件事：将其包含在 css 或样式部分中：

.date_range_filter { width:3em; }

此外，您可以在 columnFilter 中设置 sRangeFormat

.columnFilter({ sRangeFormat: "From {from}<br> to {to}" })

（或您想要的任何代码。and 被输入字段替换。{from}另{to}请注意，尝试在 sRangeFormat 中使用表格代码对我不起作用 - 这似乎是 columnFilter 中的代码错误。）

祝你好运！