p:datatable displayed wrongly after ajax update

Question

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:

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>

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

"Did you already meet this issue with the rendered of a datable?" No never — Kukeltje

Kukeltje Kukeltje · Accepted Answer · 2017-05-30T20:23:25

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.

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:datatable displayed wrongly after ajax update

1 Answers