Pagination in Salesforce

We sometimes need to display many records on UI, so it doesn't look good when you display 10000 records on single page. Pagination is the best option you can opt for.


Now question is how you can apply pagination in salesforce with native salesforce look and feel. So here is the answer of this.


Visualforce Page Code :

<apex:page controller="pagingControllerForUser">
    <apex:form >
        <apex:pageBlock >
            
            <apex:pageMessages id="pgm"/>
            
            <apex:pageBlockButtons >
                <apex:commandButton value="Search" action="{!Search}"/>
            </apex:pageBlockButtons>
            
            <apex:pageBlockSection >
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="User Name"/>
                    <apex:inputText value="{!usr.Name}"/>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>

        </apex:pageBlock>

        <apex:pageBlock rendered="{!IF(AllSearchUsers.size != null && AllSearchUsers.size > 0, true , false)}">

            <apex:outputPanel layout="block" styleClass="pSearchShowMore" id="otpNav2">
              Total Records Found: <apex:outputText rendered="{!IF(Con.resultSize==10000,true,false)}">10000 +</apex:outputText><apex:outputText rendered="{!IF(Con.resultSize < 10000,true,false)}">{!Con.resultSize}</apex:outputText>
                  <apex:image url="/img/search_prevarrow_disabled.gif" styleClass="prevArrow" rendered="{!NOT(Con.HasPrevious)}"/>
                  <apex:image url="/img/search_prevarrow.gif" title="Previous Page" styleClass="prevArrow" rendered="{!Con.HasPrevious}"/>
                  <apex:commandLink action="{!Previous}" title="Previous Page" value="Previous Page" rendered="{!Con.HasPrevious}"/>
                  <apex:outputPanel styleClass="pShowLess noLink" style="color:grey" rendered="{!NOT(Con.HasPrevious)}">Previous Page</apex:outputPanel>         
                  &nbsp;({!IF(Con.PageNumber == 1,1,((Con.PageNumber -1) * Con.PageSize)+1)}-{!IF(Con.resultSize < Con.PageSize,Con.resultSize,Con.PageNumber * Con.pageSize)})&nbsp;
                  <apex:outputPanel styleClass="pShowLess noLink" style="color:grey" rendered="{!NOT(Con.HasNext)}">Next Page</apex:outputPanel>         
                  <apex:commandLink title="Next Page" value="Next Page" rendered="{!Con.HasNext}" action="{!Next}"/>&nbsp;
                  <apex:image url="/img/search_nextarrow.gif" title="Next Page" styleClass="nextArrow" rendered="{!Con.HasNext}"/>
                  <apex:image url="/img/search_nextarrow_disabled.gif" rendered="{!NOT(Con.HasNext)}"/>          
              </apex:outputPanel>
            
            <apex:pageBlockSection columns="1">
                <apex:pageBlockTable value="{!AllSearchUsers}" var="UR">
                    <apex:column headerValue="Name" value="{!UR.Name}"/>
                    <apex:column headerValue="Email" value="{!UR.Email}"/>
                    <apex:column headerValue="Phone" value="{!UR.Phone}"/>
                    <apex:column headerValue="Department" value="{!UR.Department}"/>
                </apex:pageBlockTable>
            </apex:pageBlockSection>
            
            <apex:outputPanel layout="block" styleClass="pSearchShowMore" id="otpNav">
              Total Records Found: <apex:outputText rendered="{!IF(Con.resultSize==10000,true,false)}">10000 +</apex:outputText><apex:outputText rendered="{!IF(Con.resultSize < 10000,true,false)}">{!Con.resultSize}</apex:outputText>
                  <apex:image url="/img/search_prevarrow_disabled.gif" styleClass="prevArrow" rendered="{!NOT(Con.HasPrevious)}"/>
                  <apex:image url="/img/search_prevarrow.gif" title="Previous Page" styleClass="prevArrow" rendered="{!Con.HasPrevious}"/>
                  <apex:commandLink action="{!Previous}" title="Previous Page" value="Previous Page" rendered="{!Con.HasPrevious}"/>
                  <apex:outputPanel styleClass="pShowLess noLink" style="color:grey" rendered="{!NOT(Con.HasPrevious)}">Previous Page</apex:outputPanel>         
                  &nbsp;({!IF(Con.PageNumber == 1,1,((Con.PageNumber -1) * Con.PageSize)+1)}-{!IF(Con.resultSize < Con.PageSize,Con.resultSize,Con.PageNumber * Con.pageSize)})&nbsp;
                  <apex:outputPanel styleClass="pShowLess noLink" style="color:grey" rendered="{!NOT(Con.HasNext)}">Next Page</apex:outputPanel>         
                  <apex:commandLink title="Next Page" value="Next Page" rendered="{!Con.HasNext}" action="{!Next}"/>&nbsp;
                  <apex:image url="/img/search_nextarrow.gif" title="Next Page" styleClass="nextArrow" rendered="{!Con.HasNext}"/>
                  <apex:image url="/img/search_nextarrow_disabled.gif" rendered="{!NOT(Con.HasNext)}"/>          
              </apex:outputPanel>

        </apex:pageBlock>

    </apex:form>
</apex:page>

This page will show a input field where you can enter user name to be searched. Now when you click search all user by that name get searched, lets say I search with "Test Test". I have 8 users with that name in my organisation. 5 record will be shown at a time on screen, it will be displayed like this.





When we click "Next Page" next 5 records will be displayed, in this case 3 records. Screen will come up like this.





Apex Code :

public class pagingControllerForUser
{
    public List<User> AllSearchUsers
    {
        get
        {
            if(con != null)
                return (List<User>)con.getRecords();
            else
                return null ;
        }
        set;}
    
    public User usr {get; set;}
    
    //Controller
    public pagingControllerForUser()
    {
        AllSearchUsers = new List<User>() ;
        usr = new User() ;
    }
    
     public PageReference Search()
    {   
        if(usr.Name != null)
        {
            con = new ApexPages.StandardSetController(Database.getQueryLocator([select Id , name , email , phone, Department from User where name = :usr.Name]));
 
            // sets the number of records in each page set
            con.setPageSize(5);
        }
        else
        {
            con = null;
        }
        return null ;
    }
    
    //Instantiate the StandardSetController
    public ApexPages.StandardSetController con{get; set;}
    
    //Boolean to check if there are more records after the present displaying records
    public Boolean hasNext
    {
        get
        {
            return con.getHasNext();
        }
        set;
    }
 
    //Boolean to check if there are more records before the present displaying records
    public Boolean hasPrevious
    {
        get
        {
            return con.getHasPrevious();
        }
        set;
    }
 
    //Page number of the current displaying records
    public Integer pageNumber
    {
        get
        {
            return con.getPageNumber();
        }
        set;
    }

    //Returns the previous page of records
    public void previous()
    {
        con.previous();
    }
 
    //Returns the next page of records
    public void next()
    {
        con.next();
    }
}

Any query about this is welcomed.


Cheers