Hello folks, In this tutorial, I am going to show you How to implement Pagination in Lightning Component Salesforce. Pagination is used in some form in almost every web application to divide returned data and display it on multiple pages.

After Completing this tutorial you will be able to understand:

  • Display Record List in Lightning Component using Pagination.

What you’ll do?

  • Create a component that gets Record List from the server using Limit and offset.
  • Bind Records on the UI using HTML Table.

Pagination in Lightning Component:

Build a Lightning Component To Implement Pagination:

Login to your Salesforce Account and open Developer Console.

Pagination in Lightning

Step 1: Create an Apex Class:

Goto File>New and Create a New Apex class called GetAccountListPagination. Replace the following code in GetAccountListPagination class.

public class GetAccountListWithPaging {
@AuraEnabled
public integer offst;
 
@AuraEnabled
public integer total;
 
@AuraEnabled
public boolean hasprev;
 
@AuraEnabled
public boolean hasnext;
 
@AuraEnabled
public List<Account> lstAccount;
private static integer pagesize=5;
private static integer offset;
@AuraEnabled
public static GetAccountListWithPaging GetAccountWithPaging(boolean next,boolean prev,decimal off)
{
offset = (integer)off;
GetAccountListWithPaging pg = new GetAccountListWithPaging();
List<Account> lstAccount;
integer iRecordCount=Database.countQuery('Select Count() FROM Account');
if(next==false && prev==false){
 
}else if(next==true && (offset+pagesize)<=iRecordCount){
offset=offset+pagesize;
 
 
}else if(prev==true && offset>0){
offset=offset-pagesize;
 
}
lstAccount=[Select Id,Name,BillingState,BillingCity,Phone FROM Account LIMIT :pagesize OFFSET :offset];
pg.lstAccount = lstAccount; 
pg.offst = offset;
pg.hasprev = hasprev(offset); 
pg.hasnext = hasnxt(offset,iRecordCount,pagesize);pg.total=iRecordCount;
return pg;
} 
private static boolean hasprev(integer off){
if(off>0)
return false;
return true;}
private static boolean hasnxt(integer off,integer li,integer ps){
if(off+ps<li)
return false;
return true;}
}

If you see the below query:

lstAccount=[Select Id,Name,BillingState,BillingCity,Phone FROM Account LIMIT :pagesize OFFSET :offset];

Where LIMIT is an optional clause that can be added to a SELECT statement of a SOQL query to specify the maximum number of rows to return.

And, We can Use OFFSET keyword in SOQL to specify the starting row from the result returned by your query. This is useful in cases where we need to quickly jump to a particular subset of the total result returned by SOQL query. For example, if there are 20 records then, if we specify offset as 10 in the query then it would return record 11 through 20.

Step 2: Create Lightning Component:

Goto File>New and create a Lightning Component called DisplayAccountWithPaging. Write the following markup in Component.

DisplayAccountWithPaging.cmp

<aura:component controller="GetAccountListWithPaging">
<aura:attribute name="lstAccount" type="String[]" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="offset" type="integer" />
<aura:attribute name="next" type="boolean" />
<aura:attribute name="prev" type="boolean" />
<br/>
<br/>
<div class="slds">
<div style="font-size:28px;font-weight:bold;margin-left:20px">
Record List
</div>
<br/>
<br/>
<table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
<thead>
<tr class="slds-text-heading_label">
 
<th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
<th scope="col"><div class="slds-truncate" title="Type">Type</div></th>
 
 
<th scope="col"><div class="slds-truncate" title="Billing State">Billing State</div></th>
<th scope="col"><div class="slds-truncate" title="Billing City">Billing City</div></th>
<th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
</tr>
</thead>
<tbody>
<!-- Use the Apex model and controller to fetch server side data -->
<aura:iteration items="{!v.lstAccount}" var="account">
<tr>
 
<td><div class="slds-truncate" title="{!account.Name}">{!account.Name}</div></td>
<td><div class="slds-truncate" title="{!account.Type}">{!account.Type}</div></td>
<td><div class="slds-truncate" title="{!account.BillingState}">{!account.BillingState}</div></td>
<td><div class="slds-truncate" title="{!account.BillingCity}">{!account.BillingCity}</div></td>
<td><div class="slds-truncate" title="{!account.Phone}">{!account.Phone}</div></td>
 
</tr>
</aura:iteration>
</tbody>
</table>
<input class="slds-button slds-button--brand slds-not-selected slds-float--right" type="button" onclick="{!c.OnNext}" value="Next" disabled="{!v.next}" style="margin-left: 2px;" />
<input class="slds-button slds-button--brand slds-not-selected slds-float--right" type="button" onclick="{!c.OnPrevious}" value="Prev" disabled="{!v.prev}" />
</div>
</aura:component>

We have placed two buttons for pagination.

DisplayAccountWithPagingController.js

({
doInit : function(component, event, helper) {
var next = false;
var prev = false;
helper.getAccountListWithPaging(component,next,prev);
},
 
OnNext:function(component,event,helper)
{
var next = true;
var prev = false;
var offset = component.get("v.offset");
helper.getAccountListWithPaging(component,next,prev,offset);
},
OnPrevious:function(component,event,helper)
{
var next = false;
var prev = true;
var offset = component.get("v.offset");
helper.getAccountListWithPaging(component,next,prev,offset);
}
})

DisplayAccountWithPagingHelper.js

({
getAccountListWithPaging: function(component,next,prev,offset) {
offset = offset || 0;
var action = component.get('c.GetAccountWithPaging');
action.setParams({
"next" : next,
"prev" : prev,
"off" : offset
})
var self = this;
action.setCallback(this, function(actionResult) {
var result=actionResult.getReturnValue(); 
component.set('v.offset',result.offst);
component.set('v.next',result.hasnext);
component.set('v.prev',result.hasprev);
component.set('v.lstAccount', result.lstAccount);
});
$A.enqueueAction(action);
}
})

Test the Component.

Create a New Lightning Application and replace the following code.

<aura:application extends="force:slds" >
 
<c:DisplayAccountWithPagination />
 
</aura:application>

Output:

Pagination in Lightning

View More:

Conclusion:

I hope you understand how to implement Pagination in Lightning Component Salesforce. Please don’t hesitate to comment in the comment box for any technical help.

Thank You.

Leave a Comment