Primefaces 数据表在更改页面后未正确呈现

问题描述 投票：0回答：1

我创建了一个通知托盘。首先，它的结构是使用 

p:tabView
标签和两个选项卡进行编码的，每个选项卡内部都有一个 
p:dataTable
。当我尝试更改其中一个 
p:dataTable
的页面时，新页面未正确呈现，分页器消失。我认为问题在于 
p:tabView
组件，我将 
p:tabView
结构替换为嵌套 
h:panelGroup
。问题在两个方面仍然存在。

这是页面的初始状态：

Initial state

当我按下第2页时，

dataTable
呈现如下：

error page

现在，如果我按下“Actualizar”按钮（更新按钮），现在第 2 页将正确呈现：

page 2

我不理解这种行为。这是之前使用 

p:tabView
标签的代码：

<f:metadata>
    <f:event type="preRenderView" listener="#{notificacionesBean.updateNotificacionesButton()}"/>
</f:metadata>
<p:scrollPanel id="localPanel" widgetVar="localPanel" mode="native" >
    <div style="margin-left: 14px;">
        <h3>
            Notificaciones
        </h3>
    </div>
    <p:tabView id="bandejas" activeIndex="#{notificacionesBean.activeTab}" dynamic="true" widgetVar="bandejasViewTab" >
        <p:ajax event="tabChange" update="bandejas" listener="#{notificacionesBean.loadTab}" />
        <p:tab title="Bandeja de Entrada (#{notificacionesBean.unread})" >
            <f:facet name="title">
                <i class="pi pi-inbox" />&nbsp;
                <h:outputText value="Bandeja de Entrada (#{notificacionesBean.unread})" />
            </f:facet>
            <p:commandButton icon="pi pi-refresh" value="Actualizar" actionListener="#{notificacionesBean.updateNotificacionesButton()}" />
            &nbsp;
            <p:commandButton actionListener="#{notificacionesBean.marcarComoLeidoMulti()}" update="bandejas globalForm:menItNotif" process="inbox @this" value="Marcar como leído(s)" icon="fa fa-regular fa-envelope-open" />
            &nbsp;
            <p:commandButton actionListener="#{notificacionesBean.marcarComoNoLeidoMulti()}" update="bandejas globalForm:menItNotif" process="inbox @this" icon="pi pi-envelope" value="Marcar como no leído(s)" />
            &nbsp;
            <p:commandButton actionListener="#{notificacionesBean.eliminarMulti()}" update="bandejas globalForm:menItNotif" process="inbox @this" icon="pi pi-trash" value="Eliminar" />
            <br/>
            <br/>
            <p:dataTable id="inbox" rows="25" emptyMessage="Usted no tiene notificaciones nuevas" paginator="true" paginatorAlwaysVisible="false" var="msj" value="#{notificacionesBean.inboxMsjs}" selection="#{notificacionesBean.notifSeleccionadas}" rowKey="#{msj.idMsj}" widgetVar="inbox" rowIndexVar="indexMsj" selectionMode="multiple" >
                <p:ajax event="rowSelect" listener="#{notificacionesBean.notificacionSeleccion}" />
                <p:column selectionBox="true" style="text-align: center;" width="30" />
                <p:column headerText="Remitente" style="width: 300px;">
                    <h:outputText value="#{notificacionesBean.abreviarCampo(msj.sender.nombre.replace('/', ' '), 37)}" style="font-weight: #{msj.fontWeight()}; display: block;" />
                </p:column>
                <p:column headerText="Asunto" >
                    <h:outputText value="#{notificacionesBean.abreviarCampo(msj.asuntoEstilizado(), 200)}" style="font-weight: #{msj.fontWeight()}; display: block;" />
                </p:column>
                <p:column headerText="Fecha" style="width: 55px;">
                    <center>
                        <h:outputText value="#{notificacionesBean.fechaEstilizada(msj)}" style="font-weight: #{msj.fontWeight()}; display: block;" />
                    </center>
                </p:column>
                <p:column style="width: 66px;">
                    <center>
                        <p:commandButton actionListener="#{notificacionesBean.eliminarUno(msj)}" update="globalForm:bandejas globalForm:menItNotif" icon="pi pi-trash" title="Eliminar" />
                        <p:commandButton actionListener="#{notificacionesBean.cambiarEstatusLeido(msj)}" update="globalForm:bandejas globalForm:menItNotif" icon="#{notificacionesBean.iconEnvelope(msj)}" title="#{notificacionesBean.titleEnvelope(msj)}" />
                    </center>
                </p:column>
            </p:dataTable>
        </p:tab>    
        <p:tab title="Papelera">
            <f:facet name="title">
                <i class="pi pi-trash" />&nbsp;
                <h:outputText value="Papelera" />
            </f:facet>
            <p:commandButton actionListener="#{notificacionesBean.moverAinbox()}" update="bandejas globalForm:menItNotif" process="trash @this" icon="pi pi-inbox" value="Mover a bandeja de entrada" />
            &nbsp;
            <p:commandButton actionListener="#{notificacionesBean.marcarComoLeidoTrash()}" update="bandejas" process="trash @this" icon="fa fa-envelope-open" value="Marcar como leído(s)" />
            &nbsp;
            <p:commandButton actionListener="#{notificacionesBean.marcarComoNoLeidoTrash()}" update="bandejas" process="trash @this" icon="pi pi-envelope" value="Marcar como no leído(s)" />
            <br/>
            <br/>
            <p:dataTable id="trash" rows="25" emptyMessage="La bandeja esta vacía" paginator="true" paginatorAlwaysVisible="false" var="msj" value="#{notificacionesBean.trashBinMsjs}" selection="#{notificacionesBean.notifSeleccionadasTrash}" rowKey="#{msj.idMsj}" widgetVar="trash" rowIndexVar="trashMsj" selectionMode="multiple" >
                <p:ajax event="rowSelect" listener="#{notificacionesBean.notificacionSeleccionTrash}" />
                <p:column selectionBox="true" style="text-align: center;" width="30" />
                <p:column headerText="Remitente" style="width: 300px;">
                    <h:outputText value="#{notificacionesBean.abreviarCampo(msj.sender.nombre, 37)}" style="font-weight: #{msj.fontWeight()}; display: block;" />
                </p:column>
                <p:column headerText="Asunto" >
                    <h:outputText value="#{notificacionesBean.abreviarCampo(msj.asuntoEstilizado(), 200)}" style="font-weight: #{msj.fontWeight()}; display: block;" />
                </p:column>
                <p:column headerText="Fecha" style="width: 55px;">
                    <center>
                        <h:outputText value="#{notificacionesBean.fechaEstilizada(msj)}" style="font-weight: #{msj.fontWeight()}; display: block;" />
                    </center>
                </p:column>
                <p:column style="width: 66px;">
                    <center>
                        <p:commandButton actionListener="#{notificacionesBean.moverAinboxMsj(msj)}" update="globalForm:bandejas globalForm:menItNotif" icon="pi pi-inbox" title="Mover a bandeja de entrada" />
                        <p:commandButton actionListener="#{notificacionesBean.cambiarEstatusLeido(msj)}" update="globalForm:bandejas globalForm:menItNotif" icon="#{notificacionesBean.iconEnvelope(msj)}" title="#{notificacionesBean.titleEnvelope(msj)}" />
                    </center>
                </p:column>
            </p:dataTable>
        </p:tab>
    </p:tabView>
</p:scrollPanel>

这是当前使用嵌套的代码

h:panelGroup
：

<f:metadata>
    <f:event type="preRenderView" listener="#{notificacionesBean.updateNotificacionesButton()}"/>
</f:metadata>
<p:scrollPanel id="localPanel" widgetVar="localPanel" mode="native" >
    <h3>
        Notificaciones
    </h3>
    <h:panelGroup id="bandejas">
        <table>
            <tr>
                <td>
                    <p:commandLink actionListener="#{notificacionesBean.setActiveTab(0)}" update="bandejas">
                        <div class="#{notificacionesBean.inboxClass()}">
                            <i class="pi pi-inbox" style="margin-right: 10px;" />Bandeja de Entrada (#{notificacionesBean.unread})
                        </div>
                    </p:commandLink>
                </td>
                <td>
                    <p:commandLink actionListener="#{notificacionesBean.setActiveTab(1)}" update="bandejas">
                        <div class="#{notificacionesBean.trashClass()}">
                            <i class="pi pi-trash" style="margin-right: 10px;" />Papelera
                        </div>
                    </p:commandLink>
                </td>
            </tr>
        </table>
        <br/>
        <h:panelGroup rendered="#{notificacionesBean.activeTab == 0}">
            <p:commandButton icon="pi pi-refresh" value="Actualizar" actionListener="#{notificacionesBean.updateNotificacionesButton()}" />
            &nbsp;
            <p:commandButton actionListener="#{notificacionesBean.marcarComoLeidoMulti()}" update="bandejas globalForm:menItNotif" process="inbox @this" value="Marcar como leído(s)" icon="fa fa-regular fa-envelope-open" />
            &nbsp;
            <p:commandButton actionListener="#{notificacionesBean.marcarComoNoLeidoMulti()}" update="bandejas globalForm:menItNotif" process="inbox @this" icon="pi pi-envelope" value="Marcar como no leído(s)" />
            &nbsp;
            <p:commandButton actionListener="#{notificacionesBean.eliminarMulti()}" update="bandejas globalForm:menItNotif" process="inbox @this" icon="pi pi-trash" value="Eliminar" />
            <br/>
            <p:dataTable id="inbox" rows="25" emptyMessage="Usted no tiene notificaciones nuevas" paginator="true" paginatorAlwaysVisible="true" var="msj" value="#{notificacionesBean.inboxMsjs}" selection="#{notificacionesBean.notifSeleccionadas}" rowKey="#{msj.idMsj}" widgetVar="inbox" rowIndexVar="indexMsj" selectionMode="multiple" >
                <p:ajax event="rowSelect" listener="#{notificacionesBean.notificacionSeleccion}" />
                <p:column selectionBox="true" style="text-align: center;" width="30" />
                <p:column headerText="Remitente" style="width: 300px;">
                    <h:outputText value="#{notificacionesBean.abreviarCampo(msj.sender.nombre.replace('/', ' '), 37)}" style="font-weight: #{msj.fontWeight()}; display: block;" />
                </p:column>
                <p:column headerText="Asunto" >
                    <h:outputText value="#{notificacionesBean.abreviarCampo(msj.asuntoEstilizado(), 200)}" style="font-weight: #{msj.fontWeight()}; display: block;" />
                </p:column>
                <p:column headerText="Fecha" style="width: 55px;">
                    <center>
                        <h:outputText value="#{notificacionesBean.fechaEstilizada(msj)}" style="font-weight: #{msj.fontWeight()}; display: block;" />
                    </center>
                </p:column>
                <p:column style="width: 66px;">
                    <center>
                        <p:commandButton actionListener="#{notificacionesBean.eliminarUno(msj)}" update="globalForm:bandejas globalForm:menItNotif" icon="pi pi-trash" title="Eliminar" />
                        <p:commandButton actionListener="#{notificacionesBean.cambiarEstatusLeido(msj)}" update="globalForm:bandejas globalForm:menItNotif" icon="#{notificacionesBean.iconEnvelope(msj)}" title="#{notificacionesBean.titleEnvelope(msj)}" />
                    </center>
                </p:column>
            </p:dataTable>
        </h:panelGroup>
        <h:panelGroup rendered="#{notificacionesBean.activeTab == 1}">
            <p:commandButton actionListener="#{notificacionesBean.moverAinbox()}" update="bandejas globalForm:menItNotif" process="trash @this" icon="pi pi-inbox" value="Mover a bandeja de entrada" />
            &nbsp;
            <p:commandButton actionListener="#{notificacionesBean.marcarComoLeidoTrash()}" update="bandejas" process="trash @this" icon="fa fa-envelope-open" value="Marcar como leído(s)" />
            &nbsp;
            <p:commandButton actionListener="#{notificacionesBean.marcarComoNoLeidoTrash()}" update="bandejas" process="trash @this" icon="pi pi-envelope" value="Marcar como no leído(s)" />
            <br/>
            <br/>
            <p:dataTable id="trash" rows="25" emptyMessage="La bandeja esta vacía" paginator="true" paginatorAlwaysVisible="true" var="msj" value="#{notificacionesBean.trashBinMsjs}" selection="#{notificacionesBean.notifSeleccionadasTrash}" rowKey="#{msj.idMsj}" widgetVar="trash" rowIndexVar="trashMsj" selectionMode="multiple" >
                <p:ajax event="rowSelect" listener="#{notificacionesBean.notificacionSeleccionTrash}" />
                <p:column selectionBox="true" style="text-align: center;" width="30" />
                <p:column headerText="Remitente" style="width: 300px;">
                    <h:outputText value="#{notificacionesBean.abreviarCampo(msj.sender.nombre, 37)}" style="font-weight: #{msj.fontWeight()}; display: block;" />
                </p:column>
                <p:column headerText="Asunto" >
                    <h:outputText value="#{notificacionesBean.abreviarCampo(msj.asuntoEstilizado(), 200)}" style="font-weight: #{msj.fontWeight()}; display: block;" />
                </p:column>
                <p:column headerText="Fecha" style="width: 55px;">
                    <center>
                        <h:outputText value="#{notificacionesBean.fechaEstilizada(msj)}" style="font-weight: #{msj.fontWeight()}; display: block;" />
                    </center>
                </p:column>
                <p:column style="width: 66px;">
                    <center>
                        <p:commandButton actionListener="#{notificacionesBean.moverAinboxMsj(msj)}" update="globalForm:bandejas globalForm:menItNotif" icon="pi pi-inbox" title="Mover a bandeja de entrada" />
                        <p:commandButton actionListener="#{notificacionesBean.cambiarEstatusLeido(msj)}" update="globalForm:bandejas globalForm:menItNotif" icon="#{notificacionesBean.iconEnvelope(msj)}" title="#{notificacionesBean.titleEnvelope(msj)}" />
                    </center>
                </p:column>
            </p:dataTable>
        </h:panelGroup>
    </h:panelGroup>
</p:scrollPanel>

这是“Actualizar”按钮（更新按钮）的代码：

public void updateNotificacionesButton() {
    inboxMsjs = mensajesService.findMensajesBandejaEntrada(usuario.getIdUsuario(), (short) 1);
    unread = inboxMsjs.size();
    PrimeFaces.current().ajax().update("globalForm:bandejas");
}

我在我的项目中使用这个：

  • Primefaces 14.0.4
  • 帕亚拉6.2024.5
  • OpenJDK 17.0.2
  • 雅加达10.0

如果有任何有关正在发生的事情的提示，我将不胜感激。谢谢。

javascript java jsf primefaces
1个回答
0
投票

问题是与以下 

f:metadata
标签冲突：

<f:metadata>
    <f:event type="preRenderView" listener="#{notificacionesBean.updateNotificacionesButton()}"/>
</f:metadata>

更改页面后，先前的侦听器被触发。此侦听器方法有另一个程序化的 ajax 更新，该更新与 

p:dataTable
的内部 ajax 更新产生冲突。所以我调整了我的代码以便能够删除 
f:metadata
标签。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.