在 JSF 面板中添加刷新图标 header

Question

我正在为 UI 使用 JSF/Prime 个面孔。这里我在 Panel 中有一个 data-table。我需要在面板 header 中为 Font Awesome 提供刷新图标。单击 data-table 中的刷新图标数据应该会刷新。我怎样才能实现它？

我尝试添加 icon 属性并尝试使用 <i> 标签，但没有成功

<p:panel header="Top" styleClass="dynamicleftinnerheader" icon="fa fa-refresh">
    <p:dataTable value="#{controller.dataTable}" var="top" scrollHeight="50">
        <p:column headerText="Item">
            <h:outputText value="#{top.item}"/>
        </p:column>
</p:panel>

Answer 1

<h:form>
    <p:panel styleClass="dynamicleftinnerheader">
        <f:facet name="header">
            <p:commandButton icon="fa fa-refresh" update="dataTableId"
                action="#{controller.updateTable()}"></p:commandButton>
        </f:facet>
        <p:dataTable id="dataTableId" value="#{controller.dataTable}"
            var="top" scrollHeight="50">
            <p:column headerText="Item">
                <h:outputText value="#{top.item}"/>
            </p:column>
        </p:dataTable>
    </p:panel>
</h:form>

Answer 2

我尝试使用 prime faces 提供的 Custom Actions，它正在工作。

在 JSF 面板中添加刷新图标 header

Adding refresh icon in JSF panel header

css

jsf

primefaces

font-awesome

jsf-2.2