What is Pagination?
Pagination is the process of taking a complete a large number of records breaking that
large number of records into separate pages for viewing within the Salesforce.
What is use of Pagination in salesforce?
Pagination is a useful thing with the salesforce.Taking an example to better
understanding about 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 user can click the next tab and go through each new page display the next 10
records.
What are the steps to perform Pagination in salesforcelightning:
There are various steps to perform pagination in salesforce lightning follow as
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 following code as
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>
Step4 –>After completing Step3,we are going to use 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 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 following information by using implementing client side pagination
as
- This showsus, how many records we want to see per page. We can change it to
10,15 and 20 as per our requirement. - Shows us total number of records.
- This shows us current page number to total number of pages.
- This helps us to render to next page from current page.
- This helps us to render to previous page from current page.