JQuery disappears when the database is packaged in a form

I'm trying to create an h:datatable that has a selectBooleanCheckbox at each row, so I have wrapped the dataTable in an h:form element. My dataTable also needs to support pagination and searching. This works fine until I wrap the table in the h:form, at which point all the JQuery elements for pagination and searching disappear. I have wrapped the entire table in a form instead of just a column because there are submit buttons on the page that need to be wrapped in the same form as the table (as far as I understand).

Here is my xhtml :

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

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

                                <div class="medium-12 columns checkbox" align="right">
                                    <h:selectBooleanCheckbox id="propertySelect"
                                    <h:outputLabel for="propertySelect" class="">
                                        <h:outputText value=""/>

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

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

                        <div class="row actions">
                            <div class="medium-6 columns">
                                <h:commandButton class="button radius secondary small expand cancel"
                                                 action="#{bean.exit}" immediate="true"/>
                            <div class="medium-6 columns">
                                <h:commandButton class="button radius small expand"

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


and this is the JQuery:

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



So the JQuery works if I remove the form, but the selectBooleanCheckboxes and commandButtons do not, and vice versa.

How can I do both?

Can you check in your HTML output, how is the table been generated I mean whats the order of the table, it should be as per the documentation suggest

<table id="xyz">

once the order is been identified DataTables takes the table and transform in to the required table as per the initiation. Also I found some clue if I check the logs while I was working on a requirement like this. One More thing I don't think datatables has searching as an option, if you are required to have a search option it could be done with "bFilter":true, or by default DataTables has the filter option.