单击“搜索”按钮后更新 dataTable 数据答案

【问题标题】：Updating dataTable data after clicking on Search button单击“搜索”按钮后更新 dataTable 数据
【发布时间】：2012-03-19 07:36:00
【问题描述】：

一旦页面 xyz.xhtml 被加载，我将显示 10 条记录。

<h:dataTable var="c" value="#{userServiceBean.showTop10Applicant()}"
   styleClass="order-table"
   headerClass="order-table-header"
   rowClasses="order-table-odd-row,order-table-even-row"
   border="1" id="appListDataTable" width="100%">
  <h:column>
  <f:facet name="header">
    Applicant Name
  </f:facet>
    #{c.displayName}
  </h:column>
</dataTable>

在 showTop10Applicant() 我返回 10 条随机记录。

在这个数据表之上，我有搜索文本框和搜索按钮。我使用 ajax 来检查数据。

<h:inputText id="searchApplicant" value="#{userDataBean.toSearch}" /> &nbsp;&nbsp;+&nbsp;&nbsp;
<h:commandButton value="Search" action="#{userServiceBean.searchApplicantsByCriteria()}">
    <f:ajax execute="searchApplicant"  render=":appListDataTable"/>
</h:commandButton>

在searchApplicantsByCriteria() 我正在显示我拥有的所有记录（现在我没有检查任何标准）。

但是，当我点击搜索时，我得到了和之前一样的 10 条记录。

谁能帮我解决我的错误。

更新 1

下面是我想做的。

我想搜索数据库中的一些人。页面加载后，我使用 dataTable 随机显示 10 个人（使用方法 showTop10Applicant()）。

在搜索文本框中，我写 abc 并单击搜索按钮。我想要的是已经存在的数据表（我们在其中显示 10 个随机记录）随着 abc 的发现而更新。假设有 2 个人的名字包含 abc，那么我应该只得到这两个人的列表。

希望我现在很清楚了。如果有任何问题，请告诉我。

更新 2

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:body>
    <ui:composition template="../layout/homeLayout.xhtml">
        <ui:define name="content">
        <center>
            <h2>
            <u>
                <h:outputText value="Manage Applicants"></h:outputText>
            </u>
            </h2>
        </center>
        <br />
        <h:form id="myForm002" prependId="false">

            <div align="right">
            <h:inputText id="searchApplicant" value="#{userDataBean.toSearch}" /> &nbsp;&nbsp;+&nbsp;&nbsp;

            <h:selectOneMenu value="#{userDataBean.status}">
                <f:selectItem itemValue="ALL" itemLabel="All" />
                <f:selectItem itemValue="A" itemLabel="Active" />
                <f:selectItem itemValue="IA" itemLabel="Inactive" />
            </h:selectOneMenu>
            &nbsp;&nbsp;

            <h:commandButton value="Search" action="#{userServiceBean.searchApplicantsByCriteria()}">
                <f:ajax execute="searchApplicant"  render=":myForm001:appListDataTable"/>
            </h:commandButton>

            </div>
        </h:form>
        <hr width="100%"></hr>
        <br />

        <center>
            <h:form id="myForm001" prependId="false">    
            <f:metadata>
                <f:event listener="#{userServiceBean.showTop10Applicant()}" type="preRenderView" />
            </f:metadata>
            <h:dataTable var="c" value="#{userServiceBean.showTop10Applicant()}"
                     styleClass="order-table"
                     headerClass="order-table-header"
                     rowClasses="order-table-odd-row,order-table-even-row"
                     border="1" id="appListDataTable" width="100%">
                <h:column>
                <f:facet name="header">
                    Applicant Name
                </f:facet>
                #{c.displayName}
                </h:column>

                <h:column>
                <f:facet name="header">
                    User ID
                </f:facet>
                #{c.userId}
                </h:column>

                <h:column>
                <f:facet name="header">
                    Email ID
                </f:facet>
                #{c.email}
                </h:column>

                <h:column>
                <f:facet name="header">
                    Mobile Number
                </f:facet>
                #{c.contactReference}
                </h:column>

                <h:column>
                <f:facet name="header">
                    Active?
                </f:facet>
                <h:selectBooleanCheckbox value="#{c.isActive}"></h:selectBooleanCheckbox>
                </h:column>
            </h:dataTable>
            <br />
            </h:form>
        </center>
        </ui:define>
    </ui:composition>
    </h:body>
</html>

【问题讨论】：

不清楚“发送我拥有的所有记录”是什么意思。预期的结果是什么？你也可以添加bean代码吗？你的表单标签在哪里？
@MattHandy ：更新了问题...如果您还有任何问题，请检查并告诉我...
您确定您的 searchApplicantsByCriteria() 确实修改了 showTop10Applicant() 返回的列表吗？
@MattHandy ：是的，我不知道为什么... :( 我得到相同的 10 条记录 :( 如果我需要发布所有 xhtml 文件，请告诉我...
如何将 myForm002 的内容放入 myForm001 （myForm002 的内容很小，所以不会造成伤害）并将更改为

标签： ajax jsf jsf-2 datatables ajax4jsf

【解决方案1】：

您需要将数据表包装在像<h:panelGroup id="dataTableGroup"> 这样的panelGroup 中，然后调用<f:ajax execute="searchApplicant" render="dataTableGroup"/>。这应该可以。

【讨论】：

是的，你需要使用 panelGroup + 使用上面 Matt 描述的绝对路径，比如<f:ajax execute="searchApplicant" render=":formId:dataTableGroup"/>
您绝对应该删除部分 + 可能会包装 h:datatable。正如其他评论者所提到的，您的支持 bean 中可能存在错误。您还应该在此处列出 userServiceBean 和 userDataBean。
并从表单中删除prependId=false 属性。您可以使用默认设置，即设置为 true。

【解决方案2】：

您正在更新错误的组件。 “：”是文档根目录，你的 dataTable 周围肯定有一个表单标签（这就是我要求表单的原因）。所以至少你应该使用这样的东西：

render=":formId:appListDataTable"

将formId 替换为您的真实表单ID。这假设中间没有其他命名容器，例如 h:panelGroup 等。

如果两者（输入字段和表格）都在同一个命名容器中，您可以省略冒号：

render="appListDataTable"

此外，可能还有其他错误来源。我会怀疑你的支持 bean 方法（正如丹尼尔所评论的，这就是我要求 bean 代码的原因）。

【讨论】：

让我检查一下。尽快回复你
我已经用代码更新了问题（更新 2）。我只得到那 10 条记录。
好的，你正在使用prependId=false。查看 html 源代码（在浏览器中）。你的数据表的 id 是什么？ userServiceBean.searchApplicantsByCriteria的内容是什么
userServiceBean.searchApplicantsByCriteria 将显示我拥有的所有记录（比如 100 条记录，因为我的列表中有 100 条记录）
在浏览器中我的名字是myForm001 & myForm002。