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

时间:2012-03-19 07:36:00

标签: ajax jsf jsf-2 datatables ajax4jsf

加载页面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条随机记录。

在此dataTable上方,我有搜索文本框和搜索按钮。我用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并单击“搜索”按钮。我想要的是已经存在的dataTable(我们显示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>

2 个答案:

答案 0 :(得分:0)

您需要将数据表包装在<h:panelGroup id="dataTableGroup">之类的panelGroup中,然后调用<f:ajax execute="searchApplicant" render="dataTableGroup"/>。这应该有用。

答案 1 :(得分:0)

您正在更新错误的组件。 “:”是文档根目录,你肯定有一个表格标签包裹着你的dataTable(这就是我要求表格的原因)。所以至少你应该使用这样的东西:

render=":formId:appListDataTable"

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

如果两者(输入字段和表格)都在同一个命名容器中,则可以省略冒号:

render="appListDataTable"

此外,可能还有其他错误来源。我怀疑你的支持bean方法(由Daniel评论,这就是我要求bean代码的原因)。