Client Side Pagination in Lightning Component
What is Pagination?
Pagination is the process of taking a completely large number of records and breaking that large number of records into separate pages for viewing within Salesforce.
What Is The Use Of Pagination In Salesforce?
Pagination is a useful thing with the salesforce. Take an example to better understand pagination. Let’s say we want to display a list of records that only shows 10 records within each page rather than a huge set within Salesforce. The Salesforce users can click the next tab and go through each new page to display the next 10 records.
What Are The Steps To Perform Pagination in Salesforce Lightning:
There are various steps to perform pagination in Salesforce Lightning following:-
Step 1:-
>Go to Setup
> Developer Console
> File
> New
> Lightning Component –
> Enter the lightning component name as “Contact_Pagination”.
Step 2:-
Now we are going to create an apex class name as ‘ContactAuraController’ to fetch all records of contact by implementing the following code:
public class ContactAuraController {
@AuraEnabled
public static ContactDataTableWrappergetContactData(Decimal pageNumber, Decimal pageSize) {
Integer pSize = (Integer)pageSize;
Integer pNumber = (Integer)pageNumber;
//Offset for SOQL
Integer offset = (pNumber – 1) * pSize;
//Total Records
Integer totalRecords = [SELECT COUNT() FROM Contact];
Integer recordEnd = pSize * pNumber;
//Instance of Contact DataTable Wrapper Class
ContactDataTableWrapperobjDT = newContactDataTableWrapper();
objDT.pageSize = pSize;
objDT.pageNumber = pNumber;
objDT.recordStart = offset + 1;
objDT.recordEnd = totalRecords>= recordEnd ?recordEnd :totalRecords;
objDT.totalRecords = totalRecords;
objDT.contactList = [SELECT Id, Name, Phone, Email FROM Contact ORDER BY Name LIMIT :pSize
OFFSET :offset];
returnobjDT;
}
//Wrapper Class For Contact DataTable
public class ContactDataTableWrapper {
@AuraEnabled
public Integer pageSize {get;set;}
@AuraEnabled
public Integer pageNumber {get;set;}
@AuraEnabled
public Integer totalRecords {get;set;}
@AuraEnabled
public Integer recordStart {get;set;}
@AuraEnabled
public Integer recordEnd {get;set;}
@AuraEnabled
public List<Contact>contactList {get;set;}
}
Step 3:–
Now, we are going to write code for our lightning component as we created in Step 1:-
<aura:component controller=”ContactAuraController”>
<aura:handler name=”init” value=”{!this}” action=”{!c.doInit}” />
<aura:attribute name=”ContactList” type=”Contact[]”/>
<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″/>
<div class=”slds-m-around_xx-large”>
<h1 class=”slds-text-heading–medium”>Contacts</h1>
<br/>
<div class=”slds-float_right”>
<ui:inputSelectaura: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>
<table class=”slds-table slds-table_borderedslds-table_cell-buffer”>
<thead>
<tr class=”slds-text-title_caps”>
<th scope=”col”>
<strong><div class=”slds-truncate” title=”Name”>Name</div></strong>
</th>
<th scope=”col”>
<strong><div class=”slds-truncate” title=”Phone”>Phone</div></strong>
</th>
<th scope=”col”>
<strong><div class=”slds-truncate” title=”Email”>Email</div></strong>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items=”{!v.ContactList}” var=”con”>
<tr>
<th scope=”row” data-label=”Name”>
<div class=”slds-truncate” title=”{!con.Name}”>{!con.Name}</div>
</th>
<th scope=”row” data-label=”Phone”>
<div class=”slds-truncate” title=”{!con.Phone}”>{!con.Phone}</div>
</th>
<th scope=”row” data-label=”Email”>
<div class=”slds-truncate” title=”{!con.Email}”>{!con.Email}</div>
</th>
</tr>
</aura:iteration>
</tbody>
</table>
<div class=”slds-clearfix”>
<div class=”slds-page-header” role=”banner”>
<div class=”slds-float_right”>
<lightning:button disabled=”{!v.PageNumber == 1}” variant=”brand” aura:id=”prevPage” label=”Prev”
onclick=”{!c.handlePrev}” />
<lightning:button disabled=”{!v.PageNumber == v.TotalPages}” 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>
</div>
</aura:component>
Step 4:–
After completing Step3, we are going to use the JavaScript controller:
({
doInit: function(component, event, helper) {
varpageNumber = component.get(“v.PageNumber”);
varpageSize = component.find(“pageSize”).get(“v.value”);
helper.getContactList(component, pageNumber, pageSize);
},
handleNext: function(component, event, helper) {
varpageNumber = component.get(“v.PageNumber”);
varpageSize = component.find(“pageSize”).get(“v.value”);
pageNumber++;
helper.getContactList(component, pageNumber, pageSize);
},
handlePrev: function(component, event, helper) {
varpageNumber = component.get(“v.PageNumber”);
varpageSize = component.find(“pageSize”).get(“v.value”);
pageNumber–;
helper.getContactList(component, pageNumber, pageSize);
},
onSelectChange: function(component, event, helper) {
var page = 1
varpageSize = component.find(“pageSize”).get(“v.value”);
helper.getContactList(component, page, pageSize);
},
}}
Step 5:-
We are going to use JavaScript Helper controller to write the code as:
({
getContactList: function(component, pageNumber, pageSize) {
var action = component.get(“c.getContactData”);
action.setParams({
“pageNumber”: pageNumber,
“pageSize”: pageSize
});
action.setCallback(this, function(result) {
var state = result.getState();
if (component.isValid() && state === “SUCCESS”){
varresultData = result.getReturnValue();
component.set(“v.ContactList”, resultData.contactList);
component.set(“v.PageNumber”, resultData.pageNumber);
component.set(“v.TotalRecords”, resultData.totalRecords);
component.set(“v.RecordStart”, resultData.recordStart);
component.set(“v.RecordEnd”, resultData.recordEnd);
component.set(“v.TotalPages”, Math.ceil(resultData.totalRecords / pageSize));
}
});
$A.enqueueAction(action);
}
})
Step 6:-
After completing all previous steps, we are now going to create a lightning application to preview the component as:
> File
> New
> Lightning Application
> Enter the lightning Application name as “Contact_PaginationApp”
Step 7:-
After creating the lightning application, now we need to call our lightning application to preview by clicking on ‘Update Preview’.
Step 8:–
We can see the following information by implementing client-side pagination:
- This shows us, how many records we want to see per page. We can change it to
10,15 and 20 as per our requirement. - Shows us the total number of records.
- This shows us the current page number to the total number of pages.
- This helps us to render to the next page from the current page.
- This helps us to render to previous page from the current page.