0

我正在尝试创建一个在每一行都有一个 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 不会，反之亦然。

我怎样才能做到这两点？

4

2 回答 2

0

桌子周围不需要表格。您可以根据类名简单地捕捉 jQuery 中的按钮点击，并采取适当的行动。使用 Datatables API 从数据模型中获取您需要的值。

或者，如果您确实选择使用围绕数据表的表单（我不推荐），您将被迫在按钮单击事件（例如向上/向下翻页按钮）上使用 event.preventDefault()。请记住，表单内的任何按钮单击都会提交该表单，这在分页按钮单击时不起作用！

于 2015-03-17T20:40:50.017 回答
0

您能否检查您的 HTML 输出，表格是如何生成的？我的意思是表格的顺序是什么，应该按照文档的建议

<table id="xyz">
<thead>
<th></th>
</thead>
<tbody></tbody>
</table>

一旦确定了订单，DataTables 就会根据启动获取该表并转换为所需的表。如果我在处理这样的要求时检查日志，我也会发现一些线索。还有一件事我认为数据表没有搜索作为选项，如果您需要有一个搜索选项，它可以使用 "bFilter":true,或默认情况下 DataTables 具有过滤选项。

于 2015-03-17T20:36:06.967 回答