在FooTable插件上增加過濾器搜索的寬度

我一直在尋找所有，似乎無法找到/弄清楚如何使'數據過濾器'搜索框更大。我想在擴大窗口大小的同時保持其響應速度，這可能嗎？我試過路過在FooTable插件上增加過濾器搜索的寬度

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

但無論是在這裏不適用或我的語法不正確？

我也試過直接添加CSS width到input-group是FooTable器使用

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

但它似乎並沒有工作。我也嘗試過.addClass();並自定義我自己的CSS，但那也不起作用。

任何人有任何想法？這對我的頁面佈局非常有幫助。提前致謝！

更新

這裏是用來初始化FooTable插件的代碼。它位於我的HTML頁面的底部。我在軌道應用程序中使用它，但這應該沒有什麼區別，imo。基於關閉@ gaetanoM答案我可以使用jQuery樹遍歷以我的方式瀏覽到發現我所需要的元件的工作

<script type="text/javascript"> 

jQuery(function($) { 

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

}); 

</script>

代碼。代碼如下：

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

感謝您提供的答覆！

來源

2017-08-06 cdouble.bhuck

不要依賴'.load（）'事件來檢查插件是否已經初始化。相反，您可以簡單地設置樣式/將該類添加到插件已初始化時調用的函數中：即，當觸發'init.ft.table'事件時：http://fooplugins.github.io/FooTable/文檔/獲取-started.html＃上。你可以與我們分享你用來初始化FooTable的代碼嗎？ – Terry

更新，如果你在一個明確的答案後形成你的評論，顯示我應該如何正確使用'init.ft.table'然後我會接受它。謝謝！ –

考慮完成;） – Terry

您可以使用：

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。

來源

2017-08-06 22:48:03 gaetanoM

感謝您的答案！這段代碼必須與你的例子中正好在表格之上的'data-filter'的庫存位置一起工作。但是，我試圖重新定位篩選器搜索，它自己可以工作，並調整它的大小。但我無法讓這兩個工作。有任何想法嗎？ –

我能夠根據你的答案得到它的工作，並且已經使用工作代碼更新了我的文章。非常感謝！ –

不客氣。 – gaetanoM

在FooTable插件上增加過濾器搜索的寬度

回答

相關問題