如何调整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或style部分包含这个：

.date_range_filter { width:3em; }

此外，您可以在columnFilter

中设置sRangeFormat

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

（或者你想要的任何代码。{from}和{to}被输入字段替换。另请注意，尝试在sRangeFormat中使用表格代码并不适用于我 - 看起来像是columnFilter中的代码错误。）

祝你好运！