function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Suzi Simmons 30Suzi Simmons 30 

Beginning developer trailhead

I am having problems with the example of a visulforce page that has pagination.  They don't show how the completed page should look, and I am sure something is wrong, but I don't know what.  I have googled and looked in forums and in help, but there are no anwers I can find  to create a self contained visualforce page that displays contacts with pagination.  Everything works great, but no pagination.

Can anyone point me to where I can find the completed source code?  These trails usually show you what your completed code looks like, but this one doesn't.  I am not looking for anwers to a challenge, but just what I am doing wrong.

Thank you!  

Here is my code:
<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 -->
                 <apex:commandLink action="{! Next }" value="Next »"
                                   Rendered="{! HasNext }"/>    
                 <!-- inactive (no earlier pages) -->
                 <apex:outputText style="color: #ccc;" value="Next »"
                 rendered="{! NOT(HasNext) }" />
                 
             </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:column value="{! ct.birthdate }"/>
        </apex:pageBlockTable>
        
    </apex:pageBlock>
</apex:form>    
    
    
</apex:page>
Best Answer chosen by Suzi Simmons 30
Mahesh DMahesh D
Hi Suzi,

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

Also follow my above post for working example.


Regards,
Mahesh

All Answers

Mahesh DMahesh D
Hi Suzi,

Please take the below code:
 
<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">
            
         
            
          <apex:column value="{! ct.firstname }"/>
          <apex:column value="{! ct.lastname }"/>
          <apex:column value="{! ct.email }"/>
          <apex:column value="{! ct.account.name }"/>
          <apex:column value="{! ct.birthdate }"/>
        </apex:pageBlockTable>
        
    </apex:pageBlock>
    
    <!-- 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 -->
                 <apex:commandLink action="{! Next }" value="Next »"
                                   Rendered="{! HasNext }"/>    
                 <!-- inactive (no earlier pages) -->
                 <apex:outputText style="color: #ccc;" value="Next »"
                 rendered="{! NOT(HasNext) }" />
                 
             </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:form>    
    
    
</apex:page>


Please do let me know if it helps you.

Regards,
Mahesh
BHinnersBHinners
What is the error you are experiencing?  Does the code appear to work as you wanted it to?  Does Trailhead give a message about why it is failing?

Here is some good sample code that might help:
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_controller_sosc_pagination.htm
Mahesh DMahesh D
Hi Suzi,

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

Also follow my above post for working example.


Regards,
Mahesh
This was selected as the best answer
Suzi Simmons 30Suzi Simmons 30
Thank you so much!!!  I misread the instructions and included the table within the pageblocktable instead of after it.
It's working perfectly now.
Suzi Simmons 30Suzi Simmons 30
Thanks to all who answered my question.  My first time on the forum, and I had three answers in 20 minutes!  You guys are the best.
Mahesh DMahesh D
Hi Suzi,

Glad it helped you to resolve your issue, please mark it as solved by selecting the best answer so that it will be helpful to others in the future.

Thanks for your appreciation :-)

Regards,
Mahesh