p：ajax更新后数据表显示错误 [英] p:datatable displayed wrongly after ajax update

问题描述

我对primefaces datable有问题，我在列上有一个过滤器，在过滤结果之前，我的数据表正确显示如下：

I have problem with a primefaces datable, I have a filter on a column and before to filter the result my datatable is displayed properly like this:

当我选择一个过滤器时，该过滤器的组合框已正确填充：

When I choose a filter, the combobox of the filter is properly poulated:

很快我为过滤器选择了一个项目，结果被正确过滤，但是我有一个显示的数据表如下：

A soon I choose the item for the filter, the results are properly filtered but I have a display of the datatable like this:

< img src = https://i.stack.imgur.com/tiqJJ.png alt =错误的显示>

我刚刚看到了结果应该在数据表中显示但表已消失。

I just see the results who should be display in a datatable but the table is gone.

代码似乎很好，我看不出问题出在哪里：

The code seems good and I don't see where is the problem:

<p:outputPanel autoUpdate="true" class="ui-g-12">
                <div class="card">
                    <h1>Gestion des noeuds</h1>
                    <h:form>

                        <p:dataTable value="#{nodeController.nodes}"
                                     var="node"
                                     tableStyle="table-layout: auto;"
                                     rowKey="#{node.nodeId}"
                                     paginator="true"
                                     paginatorPosition="bottom"
                                     paginatorAlwaysVisible="false"
                                     rows="15"
                                     widgetVar="nodeTable"
                                     filteredValue="#{nodeController.filterNodes}"
                                     editable="true"
                                     selection="#{nodeController.selectedNode}"
                                     selectionMode="single"
                                     paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">

                            <p:column headerText="ID">
                                <h:outputText value="#{node.nodeId}"/>
                            </p:column>
                            <p:column headerText="Nom">
                                <h:outputText value="#{node.modeName}"/>
                            </p:column>
                            <p:column headerText="Description">
                                <h:outputText value="#{node.nodeDescription}"/>
                            </p:column>                  
                            <p:column filterBy="#{node.typeNodeId}" filterMatchMode="exact" headerText="Type">
                                <f:facet name="filter">
                                    <p:selectOneMenu onchange="PF('nodeTable').filter()">
                                        <f:selectItem itemLabel="filtre" itemValue="#{null}" noSelectionOption="true"/>
                                        <f:selectItems value="#{nodeController.nodeTypes}"/>
                                    </p:selectOneMenu>
                                </f:facet>
                                <h:outputText value="#{node.typeNodeId}"/>
                            </p:column>
                            <p:column headerText="IPv4">
                                <h:outputText value="#{node.ipv4}"/>
                            </p:column>
                            <p:column headerText="IPv6">
                                <h:outputText value="#{node.ipv6}"/>
                            </p:column>
                            <p:column headerText="powwo agent">
                                <h:selectBooleanCheckbox value="#{node.agentInstalled}"/>
                            </p:column>
                            <p:column headerText="Network status" style="text-align:center">
                                <p:graphicImage rendered="#{node.isconnected}" name="images/ConnectionStatus25.png" library="omega-layout" width="20"/>
                                <p:graphicImage rendered="#{!node.isconnected}" name="images/Siren-25.png" library="omega-layout" width="20"/>
                            </p:column>
                            <p:column>
                                <p:rowEditor/>
                            </p:column>

                        </p:dataTable>
                        <p:commandButton value="effacer"
                                         update="msg"
                                         actionListener="#{nodeController.deleteSelectedNode()}"                                                  
                                         style="width:auto;margin-bottom:10px;margin-top: 10px"/>
                    </h:form>
                </div>

            </p:outputPanel>

您是否已经通过提供datable来解决此问题？知道如何解决该问题吗？

Did you already meet this issue with the rendered of a datable? Any idea how to fix it?

推荐答案

有效地，您的标题和第一句话都不正确。这不是数据表中的错误，而是代码中的错误。在这种情况下，您不应在 p：outputPanel 上使用 autoupdate = true 。它会在其内部发生的每个ajax更新中更新其所有内容，包括过滤期间的ajax更新。后一个还更新数据表，这意味着两个冲突的更新。离题：如果您创建了最小，完整和可验证的示例，则在删除以下内容时会发现此问题代码。

Effectively, your title and first sentence are not correct. It is not a bug in the datatable but a 'bug' in your code. You should not use autoupdate="true" on the p:outputPanel in this case. It updates all its content on each ajax update that happens inside it, including an ajax update during filtering. This latter also updates the datatable which means two conflicting updates. Off-topic: If you'd created a Minimal, Complete, and Verifiable example , you'd have found this out during removal of code.

如果在数据表的filter / page / sort / ...事件之一上具有ajax侦听器时遇到此问题，则需要 autoUpdate = true 用于包装面板中其他事件的面板上，还可以通过添加 ignoreAutoUpdate来防止针对这些特定事件的自动更新发生= true 转到特定事件。因此，例如，

If you have this problem when you have an ajax listener on one of the filter/page/sort/... events on the datatable and you need the autoUpdate="true" on the panel for other events in the wrapping panel, you could also prevent the autoUpdate to happen for these specific events by adding a ignoreAutoUpdate="true" to the specific events. So e.g.

<p:ajax event="filter" ignoreAutoUpdate="true" ... />

这篇关于p：ajax更新后数据表显示错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！