+ Start a Discussion
Michael Davis 15Michael Davis 15 

Trailhead Visualforce Pagination

Working through the Trailhead Visualforce Beginner section and working in the Using Standard List Controller section.  Following through the lesson, I am trying to get the pagination section to work but cannot seem to.  I have tried like 5 times now.  Any ideas on what I am doing wrong?

<apex:page standardController="Contact" recordSetVar="contacts">
    <apex:form>
        <apex:pageBlock title="Contacts List" id="contacts_list">
        
            Filter: 
            <apex:selectList value="{! filterId }" size="1">
                <apex:selectOptions value="{! listViewOptions }"/>
                <apex:actionSupport event="onchange" reRender="contacts_list"/>
            </apex:selectList>
        
            <!-- Contacts List -->
            <apex:pageBlockTable value="{! contacts }" var="ct">
                <!-- Pagination -->
                <table style="width: 100%"><tr>
                <td>
                <!-- Page X of Y -->
                    Page: <apex:outputText
                          value=" {!PageNumber} of {! CEILING(ResultSize / PageSize) }"/>
                </td>            

                <td align="center">
                   <!-- Previous page -->
                <!-- active -->
                    <apex:commandLink action="{! Previous }" value="« Previous"
                         rendered="{! HasPrevious }"/>
                <!-- inactive (no earlier pages) -->
                    <apex:outputText style="color: #ccc;" value="« Previous"
                         rendered="{! NOT(HasPrevious) }"/>

                    &nbsp;&nbsp;  

                <!-- Next page -->
                <!-- active -->
                    <apex:commandLink action="{! Next }" value="Next »"
                         rendered="{! HasNext }"/>
                <!-- inactive (no more pages) -->
                    <apex:outputText style="color: #ccc;" value="Next »"
                           rendered="{! NOT(HasNext) }"/>
                <!-- Next page -->
                </td>
    
                <td align="right">
                <!-- Records per page -->
                    Records per page:
                    <apex:selectList value="{! PageSize }" size="1">
                        <apex:selectOption itemValue="5" itemLabel="5"/>
                        <apex:selectOption itemValue="20" itemLabel="20"/>
                        <apex:actionSupport event="onchange" reRender="contacts_list"/>
                    </apex:selectList>
                </td>
                

                </tr></table>

                <apex:column value="{! ct.FirstName }"/>
                <apex:column value="{! ct.LastName }"/>
                <apex:column value="{! ct.Email }"/>
                   <apex:column value="{! ct.Account.Name }"/>
            </apex:pageBlockTable>
        
        </apex:pageBlock>
    </apex:form>
</apex:page>
Best Answer chosen by Michael Davis 15
Michael WelburnMichael Welburn
You'll want to take all the pagination code and move it outside (below) </apex:pageBlockTable>. The only thing remaining inside that tag should be the <apex:column> values.

Because that tag iterates over every Contact, you don't want it rendering the pagination controls X number of times, just once :)

All Answers

Michael WelburnMichael Welburn
You'll want to take all the pagination code and move it outside (below) </apex:pageBlockTable>. The only thing remaining inside that tag should be the <apex:column> values.

Because that tag iterates over every Contact, you don't want it rendering the pagination controls X number of times, just once :)
This was selected as the best answer
Michael Davis 15Michael Davis 15
Thanks Michael!  That worked like a charm.  Must have miss read the instruction...repeatedly.  ;)
Michael WelburnMichael Welburn
Glad to help! Happened to me a few times as well when I was copy/pasting through modules.

If you can mark the question as resolved it'll prevent others from jumping in here unnecessarily. Thanks!