jquery - データテーブルをフォームにラップすると JQuery が消える

Question

各行に selectBooleanCheckbox を持つ h:datatable を作成しようとしているので、dataTable を h:form 要素でラップしました。私の dataTable は、ページネーションと検索もサポートする必要があります。これは、テーブルを h:form でラップするまで問題なく機能します。この時点で、ページ付けと検索のためのすべての JQuery 要素が消えます。テーブルと同じフォームでラップする必要がある送信ボタンがページにあるため、テーブル全体を列ではなくフォームでラップしました(私が理解している限り)。

ここに私のxhtmlがあります：

                    <h:form>
                        <h:dataTable value="#{bean.tableProperties()}"
                                     var="property" styleClass="responsive small-table"
                                     id="propertiesSelect">

                            <h:column headerClass="column10">
                                <f:facet name="header">Properties</f:facet>

                                <div class="medium-12 columns checkbox" align="right">
                                    <h:selectBooleanCheckbox id="propertySelect"
                                                             value="#{bean.selectedProperties[property.propertyId]}">
                                    </h:selectBooleanCheckbox>
                                    <h:outputLabel for="propertySelect" class="">
                                        <h:outputText value=""/>
                                    </h:outputLabel>
                                </div>
                            </h:column>

                            <h:column headerClass="">
                                <f:facet name="header"></f:facet>

                                <span class="">
                                   <c:if test="#{property.name != null}">
                                       <span class="">#{property.name}</span>,
                                   </c:if>
                                </span>
                            </h:column>
                        </h:dataTable>

                        <div class="row actions">
                            <div class="medium-6 columns">
                                <h:commandButton class="button radius secondary small expand cancel"
                                                 value="#{localization['global.button.cancel']}"
                                                 action="#{bean.exit}" immediate="true"/>
                            </div>
                            <div class="medium-6 columns">
                                <h:commandButton class="button radius small expand"
                                                 value="#{localization['global.button.continue']}"
                                                 action="#{bean.submit()}"/>
                            </div>
                        </div>

                        <f:event listener="#{bean.validateProperties}" type="postValidate" param=""/>

                    </h:form>
                </div>
            </div>

そしてこれはJQueryです：

$(document).ready(function() {
  $("#propertiesSelect").DataTable({
        searching: true,
        "aLengthMenu": [
            [5, 10, 15, -1],
            [5, 10, 15, "All"]
        ],
        "iDisplayLength": 10,
        "bLengthChange": true,
        "bPaginate": true,
        "bSort": true,
        "bInfo": true

    });

});

したがって、フォームを削除すると JQuery は機能しますが、selectBooleanCheckboxes と commandButtons は機能しません。

どうすれば両方を行うことができますか?