Question

Currently, I’m displaying image metadata successfully from my database using a datatable with sorting/filtering capabilities. Below my datatable I’m successfully displaying my images using a third party image coverflow (http://www.jacksasylum.eu/ContentFlow/). I’m using the same list to display both at this point. After I filter my data within my datatable I need to dynamically update my image list in my coverflow with the filtered datatable results.

What is the best way to do this using PrimeFaces? Would anyone be able to point me toward 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 an interesting question so I did some research. First I had a laugh finding this. Then I stumbled upon this. The answer appears to be:

Add this to the <p:datatable>:

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

In the 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;
   }