Right filtering

Question

Currently, I am successfully displaying image metadata from my database using data with sorting / filtering capabilities. Below my datatable, I successfully display my images using third-party image coverage ( http://www.jacksasylum.eu/ContentFlow/ ). I use the same list to display both at this moment. After I filter my data in my datatable, I need to dynamically update my list of images in my stream using filtered data results.

What is the best way to do this with PrimeFaces? Can anyone point me to a working example?

Here is my code:

screenshotData.xhtml

<h:form> <p:dataTable var="scrshot" value="#{screenshots}" paginator="true" rows="8" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="5,10,15" widgetVar="dataTable" draggableColumns="true" emptyMessage="No screenshot data found with given criteria"> <f:facet name="header"> <p:outputPanel> <h:outputText value="Search all fields:"/> <p:inputText id="globalFilter" onkeyup="dataTable.filter()" style="width:150px" /> </p:outputPanel> </f:facet> <p:column headerText="Time" sortBy="#{scrshot.time}" filterBy="#{scrshot.time}" filterMatchMode="startsWith"> <h:outputText value="#{scrshot.time}" /> </p:column> <p:column headerText="Id" sortBy="#{scrshot.id}" filterBy="#{scrshot.id}" filterMatchMode="startsWith"> <h:outputText value="#{scrshot.id}" /> </p:column> <p:column headerText="User" sortBy="#{scrshot.user}" filterBy="#{scrshot.user}" filterMatchMode="startsWith"> <h:outputText value="#{scrshot.user}" /> </p:column> </p:dataTable> </h:form> <br/> <h:form> <p:outputPanel id="imgBlock" layout="block"> <div class="ContentFlow" style="width: 1400px; height: 500px" align="center"> <div class="loadIndicator"><div class="indicator"></div></div> <div class="flow"> <a4j:repeat var="img" value="#{screenshots}" rendered="true"> <div class="item"> <img class="content" id="images" src="ImgServlet?id=#{img.id}" title="#{img.time}" draggable="true"/> <div class="label">#{img.id}</div> </div> </a4j:repeat> </div> <div class="globalCaption"></div> <div class="scrollbar"><div class="slider"><div class="position"></div></div></div> </div> </p:outputPanel> </h:form> ............... 

Screenshot.java

 @Entity @XmlRootElement @Table(name="imgTable", uniqueConstraints = @UniqueConstraint(columnNames = "id")) public class Screenshot implements Serializable, PhotoInterface { private static final long serialVersionUID = 1L; @Id @GeneratedValue private Long id; private String user; private Timestamp time; -------- Getters/Setters --------- 

ScreenshotListProducer.java

 @RequestScoped public class ScreenshotListProducer { @Inject private EntityManager em; private List<Screenshot> screenshots; @Produces @Named public List<Screenshot> getScreenshots() { return screenshots; } 

Answer 1

I found this interesting question, so I did some research. At first I was lucky to find this . Then I came across this one . The answer is as follows:

Add this to <p:datatable> :

 <p:ajax event="filter" listener="#{bean.onFilter}" update = "@this"/> 

In bean:

 public Map<String, String> onFilter(AjaxBehaviorEvent event) { DataTable table = (DataTable) event.getSource(); List<Screenshot> obj = table.getFilteredData(); // Do your stuff here Map<String, String> filters = table.getFilters(); return filters; } 

Answer 2

Thanks for all the comments in this and other questions.

I will share the solution with PrimeFaces 5.1:

 public Map<String, Object> onFilter(AjaxBehaviorEvent event) { System.out.println("FILTRAMOS LA TABLA"); DataTable table = (DataTable) event.getSource(); List<Actual> obj = table.getFilteredValue(); listaActivosFijosFiltrados = obj; if (obj != null) { System.out.println("filtered = " + obj.size()); } else { System.out.println("No records found"); } Map<String, Object> filters = table.getFilters(); return filters; }