The dataScroller
component offers lazy loading of a collection via AJAX when the page is scrolled down.
A basic definition of the dataScroller
component would be as shown here:
<p:dataScroller value="#{dataScrollerBean.cars}" var="car" chunkSize="10"> #{car.name} </p:dataScroller>
The data gets loaded with specified chunks where its size is determined with the chunkSize
attribute, and then the retrieved content will be appended at the bottom of the component.
The AJAX loading takes place when the page is scrolled down, and this is achieved by monitoring the vertical scrollbar. This can be modified by the mode
attribute, which has document
as its default value. When its value is set to inline
, the component starts to listen to the scroll event of the dataScroller
container.
The buffer
attribute states the percentage height of the buffer between the bottom of the page and the scroll position to initiate the load for the new chunk. Its value is defined as an integer and the default is 10
, which means that the load would happen after 90 percent of the viewport is scrolled down.
Instead of instant loading, a button could be used to trigger the loading. When a button is placed in a facet named loader
, it will enable the loading. The definition given next uses this facet and also contains columns to display data:
<p:dataScroller value="#{dataScrollerBean.cars}" var="car"
chunkSize="3">
<p:column>
<p:graphicImage width="400" height="250"
value="/resources/images/autocomplete/#{car.name}.png" />
</p:column>
<p:column>
<h:outputText value="#{car.name}" style="font-size: 80px" />
</p:column>
<f:facet name="loader">
<p:commandButton type="button" value="View More" />
</f:facet>
</p:dataScroller>
It's also possible to define a header
facet that will be rendered as a header to the data list.
When the lazy
attribute is set to true
and a lazy data model is provided, dataScroller
will list large amounts of data with scrolling. An example is given here:
<p:dataScroller value="#{dataScrollerBean.lazyCarModel}" var="car" chunkSize="10" lazy="true"> #{car.name} </p:dataScroller>
For further information about the lazy data model, please refer to the Handling tons of data – LazyDataModel recipe in this chapter.
This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on application severs compatible with Servlet 3.x, such as JBoss WildFly and Apache TomEE.
The showcase for the recipe is available at http://localhost:8080/pf-cookbook/views/chapter5/dataScroller.jsf
.