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

Question

我找遍了所有地方，似乎无法找到/弄清楚如何使“数据过滤器”搜索框更大。我想让它更宽，同时仍然保持对窗口大小调整的响应，这可能吗？我试过了

过滤:[{ 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 应用程序中使用它，但我认为应该不会有太大区别。

<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: The postinit.ft.table event is raised after any components are initialized but before the table is drawn for the first time. Calling preventDefault on this event will disable the initial drawing of the table.

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

fiddle .