Normally, in a plain HTML page, you would include Waypoints either at the bottom of the page body before the closing &lt;/body> tag or in the 

head section of the page like below.



<pre class="brush: js;highlight:[7,8,9]">
&lt;script type="text/javascript" 
 src="/kauswagan/waypoints/waypoints.js">&lt;/script>
&lt;script type="text/javascript">
 $(document).ready(function() {
 $('.loadmore').waypoint(function(event, direction) {
 if (direction == 'down') {
 $('.loadmore').waypoint('remove');
 more_records();
 $('.loadmore').waypoint({offset: '100%'});
 }
 },{offset: '100%'}); 
 });
&lt;/script> 
</pre>



Notice that offset is measured from the top of the page, 100% being the bottom of the page, which means that a trigger would occur if the Waypoint 

element, with a class loadmore in our example, appears at the bottom.&nbsp;&nbsp;Once Waypoint is trigged, you have to call Waypoint again to enable 

the next trigger, the next time the Waypoint element reappears. 


more_records() is the JavaScript code that fetches more data (line 8).



In PrimeFaces version 3.4.1 however, the above construct would continuously and successively call our &lt;p:remoteCommand /> at the first occurrence of the trigger.&nbsp;&nbsp; To overcome this, we implemented Waypoints in our page like the following.




In the head section (or in the bottom of the body).



<pre class="brush: xml">
&lt;script type="text/javascript" 
 src="/kauswagan/waypoints/waypoints.min.js">&lt;/script>
</pre>



In the body.



<pre class="brush: xml; highlight:[14,17,18,19,20,21,22,23,26,28]">
&lt;p:outputPanel autoUpdate="true">
 &lt;h:dataTable id="philblog" rowClasses="row_1a,row_1b" 
 var="newsObject"
 value="#{evNewsBlogsBean.philBlogs}" >

 &lt;h:column>
 &lt;!-- contents remove for clarity -->
 &lt;h:panelGrid columns="2">

 &lt;/h:panelGrid>
 &lt;/h:column>
 &lt;/h:dataTable>

 &lt;h:panelGroup rendered="#{evNewsBlogsBean.moreData}">

 &lt;script type="text/javascript">
 $(document).ready(function() {
 $('.loadmore').waypoint(function(event, direction) {
 if (direction == 'down') {
 more_records(); 
 }
 },{offset: '100%'}); 
 });
 &lt;/script> 

 &lt;div class="loadmore" />

 &lt;p:remoteCommand name="more_records"
 update="philblog"
 actionListener="#{evNewsBlogsBean.loadMore}" />
 &lt;/h:panelGroup>

&lt;/p:outputPanel>

</pre>




Note: (4/9/2013) As of version 2 of the Waypoints plugin, the callback function parameter to waypoint in line 18, requires only one parameter, the direction.




&lt;p:outputPanel /> is a container component that updates/loads that page section bounded by it.&nbsp;&nbsp;All components inside it are loaded each 

time it is updated, each time &lt;h:dataTable /> is updated, in our case.&nbsp;&nbsp;This refreshes and reloads our Waypoints with fresh new page offsets. 


In line 26, we have our Waypoint element which a &lt;div /> with class "loadmore".&nbsp;&nbsp;You can also use the ID of an element instead. Our 

remoteCommand in line 28 calls the backing bean and updates the &lt;dataTable />.



more_records() is a bodyless JavaScript code in line 20, which is also the name of our &lt;p:remoteCommand />.



The backing bean of the page should look like below although most of the data were removed for clarity.&nbsp;&nbsp; If using MySQL to fetch data, just control the number of rows queried through the limit clause.



<pre class="brush: java;highlight:22">
@ManagedBean
@ViewScoped
public class EvNewsBlogsBean implements java.io.Serializable {

 List&lt;MyData> list;
 
 public List&lt;MyData> getPhilBlogs () {
 if (list==null) {
 list = getList ();
 } 
 return list; 
 
 }

 public void setPhilBlogs (List&lt;MyData> s) { 
 }
 
 List&lt;MyData> getList () {
 return getFirstData ();
 }
 
 public void loadMore() {
 list = getNextData (); 
 }

 public class MyData {
 private String member1;
 private String more;
 /*
 public getters/setters
 */
 }
 
}
</pre>



In the page snippet above in line 14, we stop to render the entire Waypoints block on certain condition which is handled by #{evNewsBlogsBean.moreData}.&nbsp;&nbsp;This is either we reached the end of data or a number of rows limit has been reached.




That's it Good Luck.

Building a page with infinite scroll in PrimeFaces using Waypoints jQuery plugin