JSF ui:repeat with pagination

Question

I would like to know how to do a ui:repeat with multiple pages, i click the previous/next button to view the next set of data.

currently i have a ui:repeat

<ui:repeat id="repeat5" value="#{getData.data}" var="lst2" varStatus="loop">

I can view the content (basically images) in a rows/columns but all the data is displayed in the same screen but i would like to show only 5 rows and 4columns and then use the previous/next button to view the remaining images in the 5 rows/ 4 columns layout.

Currently i can specify only column configuration like below, how do i get the specified rows.

<h:panelGrid  id="panelGrid3" columns="4" cellspacing="2" cellpadding="2">

UPDATE 1 (Code for Rasmus Franke)

Pls find the code as requested by you.

<h:form id="mainForm">
<p:tabView id="tabView" >
    <p:tab title="Image Viewer" id="Viewer" titleStyle="height:30px">
        <p:layout>
        <p:layoutUnit id="layoutEast" position="east" size="350" style="height:200px">
                        <p:commandButton type="button" onclick=""  
                                         icon="ui-icon-circle-triangle-w"/>  
                        <p:commandButton type="button" onclick="switchPage(1,29);"  
                                         icon="ui-icon-circle-triangle-e"/>
                        <h:panelGrid  id="panelGrid3" columns="5" cellspacing="2" cellpadding="2">
                            <ui:repeat id="repeat5" value="#{getData.data}" var="imagesLst2" varStatus="loop">
                                    <h:panelGroup>
                                        <p:commandLink id="cl3" action="#{getData.imageID(imagesLst2.imageID)}" update=":mainForm:tabView:example">
                                            <p:graphicImage id="gi3" value="#{imagesStreamer.image}" styleClass="bord" 
                                                            onmousedown="mouseDown(this)" alt="image not available3"  width="60" height="60"
                                                            style="#{loop.index > 29 ? 'visibility: hidden;' : ''}">
                                                <f:param name="id5" value="#{imagesLst2.imageID}" />
                                            </p:graphicImage>
                                        </p:commandLink>
                                    </h:panelGroup>
                            </ui:repeat>
                        </h:panelGrid>
                    </p:layoutUnit>
        </p:layout>
    </p:tab>
</p:tabView>

Is your command link inside ui repeat working ok? I'm facing problems on this, I don't know if is a jsf limitation. — John John Pichler
Is it request scope? You load your list on each time managedBean are created? Thanks — John John Pichler
Oh, my problem was related to requestScoped and I need to bring again the data from the DB. With sessionScoped it worked as yours. — John John Pichler

Rasmus Franke Rasmus Franke · Accepted Answer · 2012-06-25T11:13:07

Do you want the pagination to work server side or client side?

If server side: you need to make a property in your managed bean, and set it to your pagination values: for example and int that gets a value 5, for page 5. Use this data to modify getData.data so that it contains only the data for that page. This way you will only have to fetch relevant data that is displayed for each page, but you will have to make a http request for each pagination click, either via a normal post or via ajax.

If client side: All data for all pages should be included in the ui:repeat to make it available for javascript modification on the client side. In other words, as it is now. Add "visibility: hidden;" to all rows except the first page server side with style="#{loop.index > x ? 'visibility: hidden;' : ''}" where x is the number of rows shown. Then make a javascript function that is called when the page is changed, with parameters for page number and number of elements per page.

function switchPage(page, numPerPage){
    var first = (page-1) * numPerPage;
    var last = (page) * numPerPage;
    $('#panelGrid3 tr').show();
    $('#panelGrid3 tr').each(function(i, e){
        if(i >= first || i <= last){
           $(e).show();
        }else{
           $(e).hide();
        }
    });
}

JSF ui:repeat with pagination

2 Answers