Turn on – Lightning Part 7 (Pagination – Client-Side)

In this blog, we will build a Pagination component which also retains the checkboxes which are checked during the next and previous screens.

Requirement: Display the list of Opportunity records with pagination and the checkbox values are retained.

Solution: We will use the “APPLICATION” type event in order to communicate when ‘next’ and ‘previous’ buttons are clicked.

You can see the output in action here:

Step 1: Create an Event – PaginatorEvent.evt


<aura:event type="APPLICATION" description="Event template to communicate on Pagination">
<aura:attribute name="pWrapperlist" type="List"/>
<aura:attribute name="masterlistSize" type="Integer"/>
<aura:attribute name="startPosn" type="Integer" />
<aura:attribute name="endPosn" type="Integer"/>
</aura:event>

Step 2: Here we’ll create a component which displays the Pagination buttons and its logic (Paginator.cmp)


<aura:component >
<aura:attribute name="pMasterWrapperlist" type="List" required="true"/>
<aura:attribute name="pageSize" type="Integer" default="5"/>
<aura:attribute name="startPosn" type="Integer" required="true"/>
<aura:attribute name="endPosn" type="Integer"/>

		<lightning:button variant="neutral" label="Previous" disabled="{!v.startPosn == 0}"
onclick="{!c.previous}" />
		<lightning:button variant="brand" label="Next" disabled="{!v.endPosn >= v.pMasterWrapperlist.length}"
onclick="{!c.next}" />
</aura:component>

PaginatorController.js (Controller):


({
next : function(component, event, helper) {
helper.next(component);
},
previous : function(component, event, helper) {
helper.previous(component);
}
})

Step 3: Call the below methods from the Paginator.js (helper):


({
next : function(component) {
var wlist = component.get("v.pMasterWrapperlist");
var endPosn = component.get("v.endPosn");
var startPosn = component.get("v.startPosn");
var subWrapperlist = [];

for(var i=0; i<component.get("v.pageSize"); i++){
endPosn++;
if(wlist.length > endPosn){
subWrapperlist.push(wlist[endPosn]);
}
startPosn++;
}
var pEvent = $A.get("e.c:PaginatorEvent");
pEvent.setParams({
"pWrapperlist"    :    subWrapperlist,
"startPosn"        :    startPosn,
"endPosn"        :    endPosn
});
pEvent.fire();
},
previous : function(component) {
var wlist = component.get("v.pMasterWrapperlist");
var startPosn = component.get("v.startPosn");
var endPosn = component.get("v.endPosn");
var subWrapperlist = [];
var pageSize = component.get("v.pageSize");

startPosn -= pageSize;
if(startPosn > -1){
for(var i=0; i<pageSize; i++){
if(startPosn > -1){
subWrapperlist.push(wlist[startPosn]);
startPosn++;
endPosn--;
}
}
startPosn -= pageSize;

var pEvent = $A.get("e.c:PaginatorEvent");
pEvent.setParams({
"pWrapperlist"    :     subWrapperlist,
"startPosn"        :    startPosn,
"endPosn"        :    endPosn
});
pEvent.fire();
}
},
})

Below are the key points:

  • The event which we created in Step 1 will be fired in this component when the user clicks “next/previous” buttons by passing the relevant parameters to it.
  • ‘pMasterWrapperlist’ is the master list which contains all the records.
  • ‘startPosn’ and ‘endPosn’ are the key pointers from which we will be displaying the records

Step 4: Creating a wrapper class:


public class WrapperClass {
public class OppWrapper {
@AuraEnabled public Opportunity opp;
@AuraEnabled public boolean isChecked;
public OppWrapper(Opportunity o){
opp = o;
isChecked=false;
}
}
}

Step 5: Main apex controller class which fetches the opportunities:


public class Pagination {
@AuraEnabled
public static List<WrapperClass.OppWrapper> getOpplist(){
List<WrapperClass.OppWrapper> pWrapperlist = new List<WrapperClass.OppWrapper>();
for(Opportunity opp : [Select Id, Name, StageName, CloseDate from Opportunity limit 100]){
pWrapperlist.add(new WrapperClass.OppWrapper(opp));
}
return pWrapperlist;
}
}

Note: For testing purpose, I have restricted the opportunity records to the limit 100

Step 6: Lets create our final component where we’ll be displaying the list of Opportunities and pagination to it.


<aura:component controller="Pagination">
<aura:attribute name="pMasterWrapperlist" type="List"/>
<aura:attribute name="pWrapperlist" type="List"/>
<aura:attribute name="pageSize" type="Integer" default="5"/>
<aura:attribute name="masterlistSize" type="Integer"/>
<aura:attribute name="startPosn" type="Integer" default="0"/>
<aura:attribute name="endPosn" type="Integer"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:handler event="c:PaginatorEvent" action="{!c.performNavigation}"/>
<div>
<aura:iteration items="{!v.pWrapperlist}" var="pw">
	<li>
<ui:inputCheckbox value="{!pw.isChecked}" />
&nbsp; &nbsp;
<ui:outputText value="{!pw.opp.Name}" />
&nbsp; &nbsp;
<ui:outputText value="{!pw.opp.StageName}" /></li>
</aura:iteration>
<c:Paginator pMasterWrapperlist="{!v.pMasterWrapperlist}" pageSize="{!v.pageSize}"
startPosn="{!v.startPosn}" endPosn="{!v.endPosn}"/></div>
</aura:component>

Key points:

  • “Paginator” component is embedded by passing the required parameters
  • Event handler method which will catch whenever the event is fired

PaginationController.js(Controller)


({
doInit : function(component, event, helper) {
helper.getOpportunities(component);
},
performNavigation : function(component, event, helper) {
helper.performNavigation(component, event);
},
})

Step 7: Call the below methods from the Pagination controller (PaginationHelper.js)


({
performNavigation : function(component,event) {
component.set("v.pWrapperlist",  event.getParam("pWrapperlist"));
component.set("v.endPosn", event.getParam("endPosn"));
component.set("v.startPosn", event.getParam("startPosn"));
},
paginate : function(component) {
var wlist = component.get("v.pMasterWrapperlist");
component.set("v.pWrapperlist", wlist);
if(wlist.length > component.get("v.pageSize")){
var subWrapperlist = [];
for(var i=0; i<component.get("v.pageSize"); i++){
subWrapperlist.push(wlist[i]);
}
component.set("v.pWrapperlist", subWrapperlist);
}
},
getOpportunities : function(component) {
var action = component.get("c.getOpplist");
action.setParams({
});
action.setCallback(this, function(resp) {
var state=resp.getState();
if(state === "SUCCESS"){
component.set("v.pMasterWrapperlist", resp.getReturnValue());
component.set("v.masterlistSize", component.get("v.pMasterWrapperlist").length);
component.set("v.startPosn",0);
component.set("v.endPosn",component.get("v.pageSize")-1);
this.paginate(component);
}
});
$A.enqueueAction(action);
}
})

Key Points:

  • ‘PerformNavigation’ method will set the relevant attributes by fetching its values from the event whenever it is fired.
  • ‘getOpportunities’ method fetches the list of opportunities

Please feel free to post your queries/thoughts.

Happy coding!!!

Advertisements

4 thoughts on “Turn on – Lightning Part 7 (Pagination – Client-Side)

    1. Hi Akhil, sorry for the delay response.
      I have added the doInit code and regarding checking all the records, I will suggest checking the subset will be enough rather than checking the master list.
      But still if you neede, you can iterate over pMasterWrapperlist.
      Let me know if you have any other queries.
      Thanks,
      Dilip Singh

      Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s