0

次の質問のように、JSFレンダリングされたコンポーネントにJQueryを適用できるため

JSFからJQueryコンポーネントへの統合

それを試した後、JQueryをJSFに正常に統合できましたが、問題は、たとえばh：dataTableを再レンダリングすると、JQueryが機能しなくなることです。ちなみに、RichFacesとa4jを使用しています。 -。

たとえば、次のようなデータテーブルがあります

<h:dataTable id="someDataTable" value="#{backingBean.someDataModel}" var="item" styleClass="table">
   <h:column>
      <h:outputText value="#{item.text}"/>
   </h:column>
</h:dataTable>

クリックするとdataTableを再レンダリングし、新しいデータを再入力するボタンがあります。

<a4j:commandButton value="Click" reRender="someDataTable"/>

このスクリプトがページにあることを忘れないでください

<script>
  jQuery.noConflict();
   jQuery(document).ready(function () {
      jQuery('.table').dataTable({
    "bSort": false}); 
    });
</script>

これで、ページが最初に読み込まれたときに並べ替えは正常に機能しますが、ボタンをクリックしてテーブルを再レンダリングすると、テーブルにバッキングBeanからの新しいデータが正常に入力されますが、並べ替えは機能しなくなります。

私が推測することから、これは何かと関係があるかもしれないと思います

jQuery(document).ready()

これを適用します

jQuery.('.table').dataTable();

ドキュメントの準備ができたときだけ、私はJQueryやJSの第一人者ではないので、dataTable再レンダリングイベントにアタッチできるイベントがjQueryにあるかどうか疑問に思いました。

4

1 に答える 1

1

ajaxリクエストが完了したら、スクリプトを再実行するだけです。

まず、スクリプトを再利用可能な関数にリファクタリングします。

<script>
    jQuery.noConflict();
    jQuery(document).ready(function() {
        initDataTable();
    });
    function initDataTable() {
        jQuery('.table').dataTable({
            "bSort": false
        }); 
    }
</script>

oncomplete次に、の同じ関数を呼び出し<a4j:commandButton>ます。

<a4j:commandButton ... oncomplete="initDataTable()" />
于 2012-05-15T13:20:01.647 に答える