JSF動的UIコンポーネントにJQueryが適用されない

Question

JSFデータテーブルに適用されるJQueryに問題があります。

私はこのように私のコード：

<script type="text/javascript" charset="utf-8"> 
      $(document).ready(function() { 
       $('<b>#example</b>').dataTable({ 
        "aoColumns": [ 
         { "asSorting": [ "asc" ] }, 
         { "asSorting": [ "asc" ] }, 
         { "asSorting": [ "desc", "asc", "asc" ] }, 
         { "asSorting": [ "desc" ] }, 
         { "asSorting": [ "asc" ] }, 
         { "asSorting": [ "asc" ] } 
        ] 
       }); 
      }); 
     </script> 

XHTML

<h:dataTable id="example" name="example" value="#{notificationBean.notificationList}" var="item" 
       cellpadding="0" cellspacing="0" border="0" 
       styleClass="display" 
       rowClasses="gradeC" 
       style="background-image: url('../images/ClientCare_Menu_Gradient.jpg'); background-repeat: repeat-x;"> 

それはレンダリング：

は

<table id="searchform:example" class="display" cellspacing="0" cellpadding="0" border="0" style="background-image: url('../images/ClientCare_Menu_Gradient.jpg'); background-repeat: repeat-x;"> 

今私の問題は、データテーブルを申請しているCSSです適用されません。

私は私が試した、まだそれはjQueryので 仕事didntの異なる表記法を試してみました：

$ { '＃のsearchform：例'}、これらのケースでは$ { '＃のsearchform.example'} 上のホバーアクションをテーブルを含むテーブル自体は、データテーブルを表示するためには動作しません。

$ {「searchform＃の例」}、$ {「＃の例」} は、これらのケースではホバーアクションが動作し、データテーブルがレンダリングされますが、CSSは、誰もがこの中に助けることができる

を適用していません？

おかげで、事前 ディーパック

Answer 1

にあなたはいないJSF <h:dataTable>コンポーネントのコンポーネントIDによって、生成されたHTML <table>要素のクライアントのIDを選択する必要があります。 HTML IDはあなたの特別な場合ですsearchform:example。 :はCSSセレクタで不正な文字であるので、あなたはそれをエスケープする必要があります：

$("#searchform\\:example") 

または代わりに、属性セレクタを使用します。

$("[id='searchform:example']") 

簡単代わり<h:dataTable>にスタイルクラスを与えることであろう。あなたの特定のケースで

<h:dataTable styleClass="example"> 

、あなたはすでに1

<h:dataTable styleClass="display"> 

だからあなたにもちょうど

$(".display")