JQuery disappears when wrapping datatable in a form -

I'm trying to make an HK: each row has a selected Boolean checkbox with data, so I wrapped the data H: Form Element: My DataTable also needs to support page scoring and search. Unless I wrap the table in the table, it works fine: the form on which all the jQuery element elements for all pageings and search disappears. I have wrapped the entire table in one form instead of just one 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's my XHTML:

  & lt; H: form & gt; & Lt; H: DataTable value = "# {Bean tableProperties ()}" var = "Properties" styleClass = "Responsive Small Table" id = "Select Properties" & gt; & Lt; H: column header class = "column 10" & gt; & Lt; F: aspect names = "header" & gt; Properties & lt; / F: Aspect & gt; & Lt; Div class = "middle-12 column checkbox" align = "right" & gt; & Lt; H: Selection Boolean Checkbox ID = "Property Sequence" value = "# {Bean. Secured Properties [Property.propertyId}}" & gt; & Lt; / H: selectBooleanCheckbox & gt; & Lt; H: for outputLabel = "property select" category = "" & gt; & Lt; H: Output text value = "" /> & lt; / H: outputLabel & gt; & Lt; / Div & gt; & Lt; / H: column & gt; & Lt; H: column header class = "" & gt; & Lt; F: aspect names = "header" & gt; & Lt; / F: Aspect & gt; & Lt; Span class = "" & gt; & Lt; C: If test = "# {property.name! = Null}" & gt; & Lt; Span class = "" & gt; # {Property.name} & lt; / Span>, & lt; / C: if & gt; & Lt; / Span & gt; & Lt; / H: column & gt; & Lt; / H: datatable & gt; & Lt; Div class = "row actions" & gt; & Lt; Div square = "middle-6 column" & gt; & Lt; H: commandButton class = "button radius secondary small extension" value = "# {localization ['global.button.cancel']}" action = "# {bean.exit}" instant = "true" /> & lt; / Div & gt; & Lt; Div square = "middle-6 column" & gt; & Lt; H: Command Button Class = "Button Radius Small Extension" value = "# {localization ['global.button.continue']}" action = "# {bean.submit ()}" /> & lt; / Div & gt; & Lt; / Div & gt; & Lt; F: Event Listener = "# {bean.validateProperties}" type = "postValidate" param = "" /> & Lt; / H: form & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

And this is JQuery:

  $ (document) .ready (function () {$ ("# propertiesSelect") .Datile ({search: True, "Elementmanu": [5, 10, 15, -1], [5, 10, 15, "all"]], "Ideaplay lang": 10, "Bleantant Change": True, "BPnet" : True, "BSROT" is true: "BNP": true});});  

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

How can I do both?