How to Implement Pagination in Salesforce Visualforce Pages?

In Salesforce, using pagination in Visualforce pages allows us to display a large set of records in manageable sets. This feature is helpful when working with large datasets in a Salesforce org.

In this Salesforce tutorial, we will learn how to implement pagination in Salesforce Visualforce pages.

Table of Contents

What is Pagination in Salesforce?

In Salesforce pages, we can divide content into separate pages by using pagination. In Salesforce, when large datasets of fetched data are displayed on a single page, it can make the page look unorganized to users and lead to performance issues.

Pagination solves this by displaying only a subset of records per page, allowing users to navigate through the pages easily.

Implement Pagination in Salesforce Visualforce Pages

To implement pagination on Salesforce pages, we need an object with a large dataset. In this example, I will use the data of the Account object to create pagination and display the account records.

1. First, we will create a visualforce controller to manage data retrieval and navigation logic for the pagination.

Click on File > New > Apex Class, then label the controller class and enter the code below.

public class PaginationController {
    public List<Account> accounts { get; private set; }
    public Integer pageSize { get; set; }
    public Integer currentPage { get; private set; }
    public Integer totalRecords { get; private set; }
    public Integer totalPages { get; private set; }

    public PaginationController() {
        pageSize = 10; 
        currentPage = 1; 
        fetchData();
    }

    public void fetchData() {
        totalRecords = [SELECT Count() FROM Account];
        totalPages = (Integer)Math.ceil((Double)totalRecords / pageSize);

        accounts = [SELECT Id, Name, Industry FROM Account 
                    ORDER BY Name 
                    LIMIT :pageSize 
                    OFFSET :((currentPage - 1) * pageSize)];
    }

    public void nextPage() {
        if (currentPage < totalPages) {
            currentPage++;
            fetchData();
        }
    }

    public void previousPage() {
        if (currentPage > 1) {
            currentPage--;
            fetchData();
        }
    }
}

In this controller class, we have parameters such as pageSize, CurrentSize, totalPages, and totalRecords. The “total records” variable will store the total count of records retrieved from the database, and the “totalPages” variable will calculate the total number of pages needed for pagination.

Then, to fetch the records, we have the method “fetchData“, and in this method, the query [SELECT Count() FROM Account] will count the records, and the parameter (Integer)Math.ceil((Double)totalRecords / pageSize) will count the total number of pages.

After this, the query below will calculate the number of fetched records and the required number of pages, and then display the records on each page according to the set limit.

[SELECT Id, Name, Industry FROM Account 
                ORDER BY Name 
                LIMIT :pageSize 
                OFFSET :((currentPage - 1) * pageSize)]

3. After this, we will create the Visualforce page using the code below.

<apex:page controller="PaginationController">
    <apex:form>
        <apex:pageBlock title="Accounts Pagination">
            <apex:pageBlockTable value="{!accounts}" var="acc">
                <apex:column value="{!acc.Name}" headerValue="Account Name"/>
                <apex:column value="{!acc.Industry}" headerValue="Industry"/>
            </apex:pageBlockTable>
            
            <apex:pageBlockButtons location="bottom">
                <apex:commandButton value="Previous" action="{!previousPage}" disabled="{!currentPage == 1}" />
                <apex:commandButton value="Next" action="{!nextPage}" disabled="{!currentPage == totalPages}" />
            </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

On the visualforce page, we have used the <apex:pageBlockTable> to display the data in a table format. In the component <apex:pageBlockButtons>, we have defined the navigation logic between pages.

4. After creating the controller and visualforce page, we will navigate to the visualforce setup and view the preview.

To navigate there, go to setup> visualforce pages, select the pagination visualforce page, and click on the Preview Layout in the next window.

In the visualforce page preview, we can see that according to the defined logic in controller, “pageSize = 10“, the page displays 10 records on each page, and using the Previous and Next buttons, we can navigate to the pages and view all the fetched records.

Create Pagination in Salesforce Visualforce Pages

This way, we can add pagination to visualforce pages in Salesforce by following the above method.

Implement Pagination on Visualforce pages with StandardSetController.

Another method for implementing pagination in Salesforce Visualforce pages is to use the StandardSetController. In the previous method, we have defined the manual logic for dividing records into pages and for the navigation button.

By using the StandardSetController, we gain built-in functionality that handles pagination automatically, and for navigation, it provides predefined methods such as next() and previous().

1. Now, execute the code below to add pagination to a visualforce page using the StandardSetController method.

<apex:page controller="PaginationWithSSCController">
    <apex:form>
        <apex:pageBlock title="Pagination with StandardSetController">
            <apex:pageBlockTable value="{!records}" var="record">
                <apex:column value="{!record.Name}" />
                <apex:column value="{!record.Industry}" />
                <apex:column value="{!record.Rating}" />
            </apex:pageBlockTable>

            <apex:pageBlockButtons location="bottom">
                <apex:commandButton action="{!previous}" value="Previous" disabled="{!!setController.hasPrevious}" />
                <apex:commandButton action="{!next}" value="Next" disabled="{!!setController.hasNext}" />
            </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

In the StandardSetController, we have inbuilt methods like “previous“, “next“, “hasnext“, and “hasprevious” to manage the pagination logic.

2. After this, create the controller class that will handle the logic for the visualforce page.

Controller class:

public with sharing class StandardPaginationController {
    public ApexPages.StandardSetController setController { get; private set; }
    public List<Account> records { get; private set; }

    public StandardPaginationController() {
        List<Account> allRecords = [SELECT Id, Name, Industry, Rating FROM Account ORDER BY Name];
        
        setController = new ApexPages.StandardSetController(allRecords);
        
        setController.setPageSize(10);
        
        updateRecords();
    }

    private void updateRecords() {
        records = (List<Account>) setController.getRecords();
    }

    public void previous() {
        setController.previous();
        updateRecords();
    }
    public void next() {
        setController.next();
        updateRecords();
    }
}

In the setPageSize, we can set the number of records to display per page.

3. After creating the visualforce page and the controller, navigate to the visualforce page setup and open the visualforce page in the Preview layout.

In the preview layout, you will see the pagination created after fetching the records of the Account object, displaying the table columns Account Name, Industry, and Rating.

Pagination with StandardSetController in Salesforce visualforce

In this way, we can implement built-in pagination for Visualforce pages in Salesforce using StandardSetController.

Both methods are efficient in adding pagination to Visualforce pages, and you must choose the one that best suits your requirements.

When you need custom logic like dynamic sorting, filtering, or other interactive features, you need to process only small amounts of data from the database simultaneously. Then, you can go with the manual pagination.

While having a simple use case requiring basic pagination, where the method should handle the pagination logic by itself, you can use the StandardsSetController pagination.

Conclusion

In this Salesforce tutorial, we learned about pagination concepts and how to implement pagination on Salesforce Visualforce pages.

We have discussed two pagination methods: one is the manual method, where we define the logic for fetching data and navigating pages. After this, we implemented pagination on Visualforce pages using the standard method, SetStandardController.

What is Pagination in Salesforce?

Implement Pagination in Salesforce Visualforce Pages

Implement Pagination on Visualforce pages with StandardSetController.

Conclusion

Salesforce Data Cloud with Agentforce Data Library

DOWNLOAD FREE AGENTFORCE EBOOK