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

Question

我一直在找，似乎找不到/弄清楚如何使"数据过滤器"搜索框更大。我想让它更宽，同时仍然保持对窗口大小调整的响应能力，这可能吗？我试过通过

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

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

我还尝试将 csswidth直接添加到 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 Transversal来导航以找到我需要的元素。代码如下：

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

小提琴。