如何使用 AJAX 单击命令按钮在 JSF 中呈现数据表答案

【问题标题】：How to render a datatable in JSF with AJAX clicking a commandButton如何使用 AJAX 单击命令按钮在 JSF 中呈现数据表
【发布时间】：2021-03-17 12:02:04
【问题描述】：

目标是拥有一个h:commandButton，一旦我点击它，使用 AJAX 它将显示数据表“listaActores”（最初不显示它）。

我怎么能这样做？我已经寻找解决方案，但我只找到了如何在表格出现时重新渲染表格。我当前的代码什么都不做就显示表格，点击按钮什么也不做。

<h:form>
    <h:commandButton id="submit" value="Submit">
        <f:ajax event="click" execute="@this" render="listaActores" />
    </h:commandButton>
    <h:dataTable id="listaActores" border="1"
        value="#{peliculasEditarBean.listaActores}" var="actor">
        <h:column>
            <f:facet name="header">NOMBRE</f:facet>
            #{actor.nombre}
        </h:column>
        <h:column>
            <f:facet name="header">APELLIDO</f:facet>
            #{actor.apellido}
        </h:column>
    </h:dataTable>
</h:form>

【问题讨论】：

标签： jsf conditional-rendering ajax-update

【解决方案1】：

你的问题有些不完整，但我还是会回答。两件事：

您并不是说表格“最初没有显示”。如果上面有一些rendered，那么您需要知道您必须呈现表的父级。您只能渲染呈现的 HTML 中存在的内容。例如，请参见 answer。
如果您将action 放在按钮中，您会发现 AJAX 不起作用。您需要将事件更改为action 或删除此属性以使用默认值。

我准备了简单的工作示例（顺便说一句。欢迎使用 Stackoverflow :-) 如果您想更快地获得帮助 Minimal, Reproducible Example 应该是您的问题的一部分 :-)）：

（XHTML，将action 添加到commandButton 并删除f:ajax 中的event）

<h:form>
    <h:commandButton id="submit" value="Submit"
        action="#{peliculasEditarBean.initialize}">
        <f:ajax execute="@this" render="listaActores" />
    </h:commandButton>
    <h:dataTable id="listaActores" border="1"
        value="#{peliculasEditarBean.listaActores}" var="actor">
        <h:column>
            <f:facet name="header">NOMBRE</f:facet>
                #{actor.nombre}
            </h:column>
        <h:column>
            <f:facet name="header">APELLIDO</f:facet>
                #{actor.apellido}
            </h:column>
    </h:dataTable>
</h:form>

（和豆子）

@ManagedBean
@ViewScoped
public class PeliculasEditarBean implements Serializable {

    private List<Actor> listaActores = null;

    public List<Actor> getListaActores() {
        return listaActores;
    }

    public void initialize() {
        listaActores = new ArrayList<>(3);
        listaActores.add(new Actor("foo", "bar"));
        listaActores.add(new Actor("foo", "foo"));
        listaActores.add(new Actor("bar", "bar"));
    }
    
    public class Actor {
        private final String nombre;
        private final String apellido;

        Actor(String nombre, String apellido) {
            this.nombre = nombre;
            this.apellido = apellido;
        }

        public String getApellido() {
            return apellido;
        }

        public String getNombre() {
            return nombre;
        }
    }
}

【讨论】：