Client Side Pagination in Lightning Component

Client Side Pagination in Lightning Component

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
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 {
    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];
    //Wrapper Class For Contact DataTable 
    public class ContactDataTableWrapper {
        public Integer pageSize {get;set;}
        public Integer pageNumber {get;set;}
        public Integer totalRecords {get;set;}
        public Integer recordStart {get;set;}
        public Integer recordEnd {get;set;}
        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>
        <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″/>
        <table class=”slds-table slds-table_borderedslds-table_cell-buffer”>
                <tr class=”slds-text-title_caps”>
                    <th scope=”col”>
                        <strong><div class=”slds-truncate” title=”Name”>Name</div></strong>
                    <th scope=”col”>
                        <strong><div class=”slds-truncate” title=”Phone”>Phone</div></strong>
                    <th scope=”col”>
                        <strong><div class=”slds-truncate” title=”Email”>Email</div></strong>

                <aura:iteration items=”{!v.ContactList}” var=”con”>
                        <th scope=”row” data-label=”Name”>
                            <div class=”slds-truncate” title=”{!con.Name}”>{!con.Name}</div>
                        <th scope=”row” data-label=”Phone”>
                            <div class=”slds-truncate” title=”{!con.Phone}”>{!con.Phone}</div>
                        <th scope=”row” data-label=”Email”>
                            <div class=”slds-truncate” title=”{!con.Email}”>{!con.Email}</div>
        <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}”/>
                <p class=”slds-page-header__title”>{!v.RecordStart}-{!v.RecordEnd} of {!v.TotalRecords} | Page
{!v.PageNumber} of {!v.TotalPages}</p>

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”);
        helper.getContactList(component, pageNumber, pageSize);
    handlePrev: function(component, event, helper) {
        varpageNumber = component.get(“v.PageNumber”); 
        varpageSize = component.find(“pageSize”).get(“v.value”);
        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”);
            “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));

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

  1. This showsus, how many records we want to see per page. We can change it to
    10,15 and 20 as per our requirement.
  2. Shows us total number of records.
  3. This shows us current page number to total number of pages.
  4. This helps us to render to next page from current page.
  5. This helps us to render to previous page from current page.