Question

我一直在寻找，似乎无法找到/弄清楚如何使'数据过滤'搜索框更大。我想让它更广泛，同时仍然保持对窗口大小调整的响应，这可能吗？我试过传递

filtering: [{ container: "#footableFilterBox", options: { style: { width: "75%" } } }]

但要么这里不适用，要么我的语法不正确？

我还尝试将css width直接添加到FooTable使用

生成的input-group

$(document).load(function() {
  $('div#footableFilterBox').find('.input-group').css('width','75%');
});

但它似乎不起作用。我也试过.addClass();并自定义我自己的CSS，但这也不起作用。

有人有什么想法吗？这对我的页面布局非常有帮助。提前谢谢！

更新

以下是用于初始化FooTable插件的代码。它位于我的HTML页面的底部。我在rails应用程序中使用它，但这不会产生太大的影响，imo。

<script type="text/javascript">

jQuery(function($) {

  $('#propertiesTable').footable({
      filtering: [{
          container: "#footableFilterBox"
      }]
  });

});

</script>

有效的代码

根据@ gaetanoM的回答，我能够使用jQuery Tree Traversal导航找到我需要的元素。代码如下：

$('#propertiesTable').on('postinit.ft.table', function(e, ft) {
    $(this).closest('.clients-list').siblings('#footableFilterBox').find('.footable-filtering-search, .input-group').css('width','100%');
  }).footable();

感谢您提供的所有答案！

Answer 1

您可以使用：

postinit.ft.table：postinit.ft.table事件是在初始化任何组件之后但在第一次绘制表之前引发的。在此事件上调用preventDefault将禁用表的初始绘制。

$('.table').on('postinit.ft.table', function(e, ft) {
  $(this).find('.footable-filtering-search .input-group').css('width','75%')
}).footable();

fiddle。

在FooTable Plugin

1 个答案: