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.