Implementing Pagination in Aura Components

Pagination is a common technique used in Salesforce to display a large number of records by splitting them into multiple pages. It helps control the number of records displayed on each page, improving performance and user experience. In this blog, we will explore how to implement pagination in an Aura component, allowing users to navigate through a list of records efficiently.

1. Apex method for pagination:

@AuraEnabled
public static TaskDataTableWrapper getEmployeeTasks(String EmpId, String searchKey, Integer pageSize, Integer pageNumber){
    Integer offset = (pageNumber - 1) * pageSize; // Offset for SOQL
    Integer totalRecords = [SELECT COUNT() FROM EmployeeTask__c WHERE Employee_Name__r.Emp_ID__c = :EmpId];
    Integer recordEnd = pageSize * pageNumber;
    
    TaskDataTableWrapper objDT = new TaskDataTableWrapper(); // Instance of Task DataTable Wrapper Class
    objDT.pageSize = pageSize;
    objDT.pageNumber = pageNumber;
    objDT.recordStart = offset + 1;
    objDT.recordEnd = totalRecords >= recordEnd ? recordEnd : totalRecords;
    objDT.totalRecords = totalRecords;
    
    String query = 'SELECT Id, Name, Task_Assigned_By__r.Name, Status__c, End_Date__c, Start_Date__c FROM EmployeeTask__c WHERE Employee_Name__r.Emp_ID__c = :EmpId';
    if (searchKey != null) {
        String key = '%' + searchKey + '%';
        query += ' AND Name LIKE :key';
    }
    query += ' ORDER BY Name LIMIT :pageSize OFFSET :offset';
    
    objDT.Tasklist = Database.query(query);
    
    return objDT;
}

2. Attributes for pagination:

<aura:attribute name="PageNumber" type="integer" default="1"/>
<aura:attribute name="TotalPages" type="integer" default="0"/>
<aura:attribute name="TotalRecords" type="integer" default="0"/>
<aura:attribute name="RecordStart" type="integer" default="0"/>
<aura:attribute name="RecordEnd" type="integer" default="0"/>

3. Pagination code:

<div class="slds-float_right">
    <ui:inputSelect aura:id="pageSize" label="Display Records Per Page: " change="{!c.onSelectChange}">
        <ui:inputSelectOption text="10" label="10" value="true"/>
        <ui:inputSelectOption text="15" label="15"/>
        <ui:inputSelectOption text="20" label="20"/>
    </ui:inputSelect>
    <br/>
</div>

<div class="slds-clearfix">
    <div class="slds-page-header" role="banner">
        <div class="slds-float_right">
            <lightning:button variant="brand" aura:id="prevPage" label="Prev" onclick="{!c.handlePrev}"/>
            <lightning:button aura:id="nextPage" variant="brand" label="Next" onclick="{!c.handleNext}"/>
        </div>
        <p class="slds-page-header__title">{!v.RecordStart}-{!v.RecordEnd} of {!v.TotalRecords} | Page {!v.PageNumber} of {!v.TotalPages}</p>
    </div>
</div>

4. JavaScript controller for pagination:

({
    SearchHelper: function(component, event, helper) {
        var employeid = component.get("v.EmpId");
        var pageNumber = component.get("v.PageNumber");
        var pageSize = 10;
        var action = component.get('c.getEmployeeTasks');
        action.setParams({
            EmpId: employeid,
            searchKey: component.get("v.searchKeyword"),
            pageNumber: pageNumber,
            pageSize: pageSize
        });
        action.setCallback(this, function(a) {

Summary:

Implementing pagination in an Aura component allows users to efficiently navigate through a large number of records by displaying them on multiple pages. The Apex method handles the pagination logic, while the attributes store information about the current page and the overall record count. The HTML markup and JavaScript controller work together to provide a user-friendly interface with pagination controls. By using pagination, we can enhance performance and improve the user experience when dealing with large datasets.

Hits: 0