FooTableプラグインでのフィルター検索の幅を広げよう

Question

私はこれまで何度も探していましたが、 'データフィルター'検索ボックスをもっと大きくする方法を見つけたり、見つけたりできなかったようです。私はそれを可能にして、ウィンドウのサイズ変更に対する応答性を維持しながら、それを広げたいと思いますか？私は

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

を渡して試してみたが、それはここでは適用されませんいずれか、または私の構文が間違っていますか？

私はまたFooTableが

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

を使用して生成しますが、動作するようには思えないinput-groupに直接CSS widthを追加しようとしました。私はまた.addClass();しようとして自分のCSSをカスタマイズするが、どちらも動作しませんでした。

誰もが考えている？これは私のページのレイアウトに非常に役立ちます。前もって感謝します！

更新ここ

はFooTableプラグインを初期化するために使用されるコードです。私のHTMLページの一番下にあります。私はレールアプリケーションで使用していますが、違いはあまりないはずです。私は、私は必要な要素を見つけることに私の方法をナビゲートするためにjQueryのツリートラバーサルを使用することができました@ gaetanoMの答えのオフに基づいて

を働いた

<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(); 

すべての回答をいただきありがとうございます。

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。