You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Pagination Using Lightning Components


By: Santhosh

Salesforce Lightning Components is a new UI framework for developing web apps for mobile and desktop devices. It is used to build a single-page application with responsive user interfaces, and also it uses JavaScript on the client side and Apex on the server side.

The below examples explain how to do a pagination using Lightning components.

Step 1: Go to Setup -> Developer Console -> File -> New -> Lightning Component -> Enter the lightning component name as “Opportunity_PaginationTable”.

Note:

  • <aura:attribute> tag defines an attribute available on component. name and type attributes are required for this tag.
  •  For dropdown we can use <ui:inputSelect> tag in lightning component.
  •  <aura:iteration> tag used to iterate over a collection of items. Data changes in the collection are rerendered automatically on the page.
  • Created the lightning buttons : First, Previous, Next, Last for page navigation.

Opportunity_PaginationTable.cmp 

<aura:component controller=”OpportunityController” implements=”force:appHostable,flexipage:availableForAllPageTypes”>

<aura:handler name=”init” action=”{!c.doInit}” value=”{!this}”/>

<aura:attribute name=”opportunityList” type=”Opportunity[]” />

<aura:attribute name=”paginationList” type=”Opportunity[]”/>

<aura:attribute name=”pageSize” type=”Integer” default=”5″/>

<aura:attribute name=”totalSize” type=”Integer”/>

<aura:attribute name=”start” type=”Integer” />

<aura:attribute name=”end” type=”Integer”/>

<table >

<tr > <td style=”width:5%”>Show</td><td style=”width:7%”><ui:inputSelect aura:id=”records” change=”{!c.onSelectChange}”>

<ui:inputSelectOption text=”5″ value=”5″/>

<ui:inputSelectOption text=”10″ value=”10″/>

<ui:inputSelectOption text=”20″ value=”20″/>

<ui:inputSelectOption text=”30″ value=”30″/>

</ui:inputSelect></td><td>Entries</td>

<td style=”width:7%”>Search</td>

<td style=”width:25%”>

<ui:inputText aura:id=”input1″   change=”{!c.searchKeyChange}”   required=”true”></ui:inputText>

</td>

</tr>

</table>

<table class=”slds-table slds-table–bordered “>

<thead>

<tr style=”background-color:#6cbcd2;color:white;font-weight:bold”>

<th>Name</th>

<th>Stage</th>

<th>Closedate</th>

<th>Amount</th>

</tr>

</thead>

<tbody>

<aura:iteration items=”{!v.paginationList}” var=”item”>

<tr>

<td><ui:outputText value=”{!item.Name}” /></td>

<td><ui:outputText value=”{!item.StageName}” /></td>

<td><ui:outputText value=”{!item.CloseDate}” /></td>

<td><ui:outputText value=”{!item.Amount}” /></td>

</tr>

</aura:iteration>

<lightning:button label=”First” disabled=”{!v.start == 0}”  onclick=”{!c.first}” />

<lightning:button label=”Previous” disabled=”{!v.start == 0}”  onclick=”{!c.previous}” />

<lightning:button label=”Next” disabled=”{!v.end >= v.totalSize}” onclick=”{!c.next}” />

<lightning:button label=”Last” disabled=”{!v.end >= v.totalSize}” onclick=”{!c.last}” />

</tbody>

</table>

</aura:component>

Step 2: Create a Client-Side Controller

  • In the client-side controller, Aura handler calls the action like doInit which initializes the functions in Lightning component.
  • The setCallback method will return a response like Success , failure.
  • If it is a “Success”, we can get the list of Opportunity records. We can process this list of Opportunity records based on the button selection.
  • The onSelectChange method will be called when a dropdown value gets changed.
  • Iterate the opportunity list records using Start, End , totalsize, and PageSize attributes based on the button selection.
  • Here totalsize denotes the Opportunity list size. We must declare the attribute for Start, end, totalsize, and pagesize in the component.

Opportunity_PaginationTableController.js

({

doInit : function(component, event, helper)

{

var pageSize = component.get(“v.pageSize”);

var action = component.get(“c.getOpportunities”);

action.setCallback(this, function(response)

{

var state = response.getState();

if (component.isValid() && state === “SUCCESS”)

{

component.set(‘v.opportunityList’, response.getReturnValue());

component.set(“v.totalSize”, component.get(“v.opportunityList”).length);

component.set(“v.start”,0);

component.set(“v.end”,pageSize-1);

var paginationList = [];

for(var i=0; i< pageSize; i++)

{

paginationList.push(response.getReturnValue()[i]);

}

component.set(‘v.paginationList’, paginationList);

//console.log(paginationList);

}

});

$A.enqueueAction(action);

},

onSelectChange : function(component, event, helper) {

var selected = component.find(“records”).get(“v.value”);

var paginationList = [];

var oppList = component.get(“v.opportunityList”);

for(var i=0; i< selected; i++)

{

paginationList.push(oppList[i]);

}

component.set(‘v.paginationList’, paginationList);

},

searchKeyChange: function(component, event) {

var searchKey =  component.find(“input1”).get(“v.value”);

console.log(searchKey);

var action = component.get(“c.getByName”);

var keysize = component.get(“v.totalSize”);

action.setParams({

“searchKey”: searchKey

});

action.setCallback(this, function(response) {

var state = response.getState();

if (component.isValid() && state === “SUCCESS”)

{

component.set(‘v.opportunityList’, response.getReturnValue());

component.set(“v.totalSize”, component.get(“v.opportunityList”).length);

var paginationList = [];

for(var i=0; i< keysize; i++)

{

paginationList.push(response.getReturnValue()[i]);

}

component.set(‘v.paginationList’, paginationList);

}

});

$A.enqueueAction(action);

},

first : function(component, event, helper)

{

var oppList = component.get(“v.opportunityList”);

var pageSize = component.get(“v.pageSize”);

var paginationList = [];

for(var i=0; i< pageSize; i++)

{

paginationList.push(oppList[i]);

}

component.set(‘v.paginationList’, paginationList);

},

last : function(component, event, helper)

{

var oppList = component.get(“v.opportunityList”);

var pageSize = component.get(“v.pageSize”);

var totalSize = component.get(“v.totalSize”);

var paginationList = [];

for(var i=totalSize-pageSize+1; i< totalSize; i++)

{

paginationList.push(oppList[i]);

}

component.set(‘v.paginationList’, paginationList);

},

next : function(component, event, helper)

{

var oppList = component.get(“v.opportunityList”);

var end = component.get(“v.end”);

var start = component.get(“v.start”);

var pageSize = component.get(“v.pageSize”);

var paginationList = [];

var counter = 0;

for(var i=end+1; i<end+pageSize+1; i++)

{

if(oppList.length > end)

{

paginationList.push(oppList[i]);

counter ++ ;

}

}

start = start + counter;

end = end + counter;

component.set(“v.start”,start);

component.set(“v.end”,end);

component.set(‘v.paginationList’, paginationList);

},

previous : function(component, event, helper)

{

var oppList = component.get(“v.opportunityList”);

var end = component.get(“v.end”);

var start = component.get(“v.start”);

var pageSize = component.get(“v.pageSize”);

var paginationList = [];

var counter = 0;

for(var i= start-pageSize; i < start ; i++)

{

if(i > -1)

{

paginationList.push(oppList[i]);

counter ++;

}

else {

start++;

}

}

start = start – counter;

end = end – counter;

component.set(“v.start”,start);

component.set(“v.end”,end);

component.set(‘v.paginationList’, paginationList);

}

})

Step 3: Create an Apex Class

  • In the Controller, using the getOpportunities method, we retrieve all opportunity records with a condition
  • We must declare @AuraEnabled in the Apex class method.
  • If any apex class method is not denoted by @AuraEnabled, then it’s not called by the lightning controller

OpportunityController_AC 

public with sharing class OpportunityController_AC

{

@AuraEnabled

public static List<Opportunity> getOpportunities()

{

return [SELECT Id, Name,StageName,CloseDate,Amount FROM Opportunity Where Amount!= Null];

}

// This method used for reterived  the list of opportunity records based on the search string

@AuraEnabled

public static List<Opportunity> getByName(String searchKey) {

String name = ‘%’ + searchKey + ‘%’;

return [SELECT id, Name,StageName, CloseDate,Amount FROM Opportunity WHERE name LIKE :name and Amount!= Null];

}

}

Step 4: How to include Lightning component in a home page?

  • Switch to Lightning experience.
  • We can use this pagination component to any objects.
  • For example, I have used this component in Home Page. Click Settings and select Edit Page. 

How To Include Salesforce Lightning Components into Salesforce Home Page

  • After the select Edit Page, Lightning Process Builder window will open. Here, we will be able to edit our page layouts.
  • In the right-side corner, all standard and custom components are available.
  • You can easily drag and drop the components to the canvas panel.
  • Drag the Opportunity_PaginationTable lightning component and click Save.
  • Salesforce Lightining Components
  • Finally, we have Pagination here using lightning component on the Home page. Based on the button selection, record list will appear.

Salesforce Lightining Components Pagination

Reference Link:

https://trailhead.salesforce.com/en/modules/lex_dev_lc_basics

https://trailhead.salesforce.com/en/projects/quickstart-lightning-components