p:dataTable Clears Table Cells after Using Filtering Capability when trying to Sort Columns

Question

Am using JDK 1.8 and JSF Primefaces 7 to create a JSF DataTable which needs to have sorting and filtering functionality.

My code hits an external datasource which marshals my Product Pojos from an external JSON feed.

My table populates correctly and I am able to sort all my columns.

When I click on a specific column's header, I am able to utilize the filtering capability by viewing a single row (after entering in the data for a specific row).

However, when I click out of the specific column's header and try sorting any of my columns, the table's contents become "cleared" (you can't see anything inside the rows or columns, but the length of the rows remains visible).

JSF Primefaces dependencies:

<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>7.0</version>
</dependency>

<dependency>
    <groupId>org.primefaces.extensions</groupId>
    <artifactId>primefaces-extensions</artifactId>
    <version>7.0.3</version>
</dependency>

All the UI functionality seems to work by setting up my table declaratively via a custom XHTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
>

<p:dataTable id="data"
             var="entityList"
             value="#{myView.product.entityList}"
             styleClass="auto-table"
             resizableColumns="true"
             resizeMode="expand"
             paginator="true"
             rows="25"
             paginatorAlwaysVisible="true"
             paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
             rowsPerPageTemplate="25,50,100"
             reflow="true"
             sortMode="single">

    <p:column headerText="product_id"
              sortBy="#{entityList.product_id}"
              filterBy="#{entityList.product_id}"
              filterMatchMode="contains">
        <h:outputText value="#{entityList.product_id}"/>
    </p:column>

    <p:column headerText="description"
              filterBy="#{entityList.description}"
              filterMatchMode="contains">
        <h:outputText value="#{entityList.description}"/>
    </p:column>

    <p:column headerText="price"
              filterBy="#{entityList.price}"
              filterMatchMode="contains">
        <h:outputText value="#{entityList.price}"/>
    </p:column>
</p:dataTable>
</html>

MyView.java:

@Named
@ViewScoped
public class MyView implements Serializable {

    private Product product;

    @PostConstruct
    public void init() {
    }


    public void getProduct() {
        // This method just hits an external datasource 
        // and marshals the JSON w/ my Product POJO.
    }

}

Product:

@Data
public class Product {

  private List<Entity> entityList;

  @Data
  public static class Entity {
      private String productId;
      private String description;
      private String price;

       // Getters and Setters not listed because of Lombok usage.
  }

}

Why does the table become empty (with the rows present / viewable) after I click out of the filtering and then trying to resort?

It happens after trying to sort on a particular column's header...

Is there a helper class that I need to write or is it simply finding a particular XTML attribute that I need to insert inside my <p:column/> tag?

PF showcase works great... no problems there. Compare code. Make a [mcve] ,reduce/remove attributes, sure you don't have an `h:head` (you should)... — Kukeltje, Jun 22 '20 at 18:03
Are ypu saying it works when you don't use lombok? Your tagging suggests this but your title and text do not refer to lombok at all. — Kukeltje, Jun 22 '20 at 18:05
@Kukeltje - I don't think lombok has anything to do with this... I just tagged it in case a reader was confused what ```@Data``` annotation was. I removed that tag from this post. No, what I am trying to say is that it sorting the columns and filtering works. But, after I filter and then try to sort the columns, it doesn't work. — PacificNW_Lover, Jun 22 '20 at 18:26
@WoAiNii - Am very new to JSF / Primefaces, can you please show me some code of how to wrap my data table within a form? — PacificNW_Lover, Jun 22 '20 at 18:46
Tags are for what is part of the problem. For clarity about e.g. you can add it to the text or make the annotations fully qualified. Examples of how to add a form to a page are in all tutorials, the PrimeFaces showcase, good books etc... oh and a searchengine helps with this. And try PF 8... — Kukeltje, Jun 22 '20 at 18:53
I try your code and I get some error in the console, have you tried resolving them first? Some hints, check getter and setter, especially product_id, add , put dataTable within a and generally compare your code with showcase. — WoAiNii, Jun 22 '20 at 19:11
@WoAiNii - thanks but the showcase has very minimalist examples... Will try your suggestion of placing it inside `````` and adding ```h:head``` — PacificNW_Lover, Jun 22 '20 at 19:16
I reproduce your error, and the loss of the values can be avoided serializing your beans, but check also for other problems (do you really need Entity class to be static?). — WoAiNii, Jun 22 '20 at 19:43
Serializing my beans / pojos worked! Why was this the solution? You rock @WoAinii — PacificNW_Lover, Jun 22 '20 at 20:37
There's a good explanation [here](https://stackoverflow.com/questions/3372687/jsf-backing-bean-should-be-serializable) by BalusC (as always) — WoAiNii, Jun 22 '20 at 20:53

p:dataTable Clears Table Cells after Using Filtering Capability when trying to Sort Columns

0 Answers0