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;
}
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With