增加 FooTable 插件上过滤器搜索的宽度

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。