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

Question

我找遍了所有地方，似乎无法find/figure 想出如何使 'data-filter' 搜索框变大。我想让它变宽，同时仍然保持对 window 调整大小的响应，这可能吗？我试过了

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 应用程序中使用它，但在我看来应该没什么区别。

<script type="text/javascript">

jQuery(function($) {

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

});

</script>

有效的代码

基于@gaetanoM 的回答，我能够使用 jQuery 树遍历来导航找到我需要的元素。代码如下：

$('#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.

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

Increase width of filter search on FooTable Plugin

javascript

jquery

html

css

footable