Implementation of pagination in lightning component Salesforce
Updated 14 October 2025
In this blog we will learn the implementation of pagination in lightning component, with the use of lightning bundle.
Implementing Pagination:
Goto Setup > Develop > Apex Classes > New
Write the following code in Apex Class:
Apex Controller-
public with sharing class pagination {
/**
* Webkul Software.
*
* @category Webkul
* @author Webkul
* @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/
@AuraEnabled
public list<account> acc;
@AuraEnabled
public integer offst;
@AuraEnabled
public integer total;
@AuraEnabled
public boolean hasprev;
@AuraEnabled
public boolean hasnext;
private static integer pagesize=8;
private static integer offset;
@AuraEnabled
public static pagination getacc(boolean next,boolean prev,decimal off){
offset = (integer)off;
list<account> li = new list<account>();
integer listlength = [Select count() from account where name!=null];
if(!schema.sobjecttype.Account.isaccessible()){
li = new list<account>();
}else{
if(next==false && prev==false){
li = [Select id,name,accountSource,AccountNumber,Active__c from account LIMIT :pagesize OFFSET :offset];
}else if(next==true && (offset+pagesize)<=listlength){
offset=offset+pagesize;
li = [Select id,name,accountSource,AccountNumber,Active__c from account LIMIT :pagesize OFFSET :offset];
}else if(prev==true && offset>0){
offset=offset-pagesize;
li = [Select id,name,accountSource,AccountNumber,Active__c from account LIMIT :pagesize OFFSET :offset];
}
}
pagination pg = new pagination();
pg.acc = li;
pg.offst = offset;
pg.hasprev = hasprev(offset);
pg.hasnext = hasnxt(offset,listlength,pagesize);
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;
}
}
Open Devloper Console.
Create a new lightning Component. File>New>Lightning Component
Write the following Code in the Component:
Component-
<aura:component controller="pagination">
<!--
/**
* Webkul Software.
*
* @category Webkul
* @author Webkul
* @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/
-->
<ltng:require styles="{!$Resource.SLDS +
'/assets/styles/salesforce-lightning-design-system-ltng.css'}" />
<aura:attribute name="accounts" type="Account[]"/>
<aura:handler name="init" value="{!this}" action="{!c.getAccounts}" />
<aura:attribute name="offset" type="integer" />
<aura:attribute name="next" type="boolean" />
<aura:attribute name="prev" type="boolean" />
<div class="wk_static">
<div class="slds-page-header" role="banner">
<div class="slds-grid">
<div class="slds-col slds-has-flexi-truncate">
<div class="slds-media slds-media--center slds-no-space slds-grow">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-account">
<c:SVG class="slds-icon" xlinkHref="/resource/SLDS/assets/icons/standard-sprite/svg/symbols.svg#account" />
<span class="slds-assistive-text">Account Icon</span>
</span>
</div>
<div class="slds-media__body">
<h1 class="slds-page-header__title slds-m-right--small slds-truncate slds-align-middle" title="Accounts">Accounts</h1>
</div>
</div>
</div>
</div>
</div>
<table class="slds-table slds-table--bordered slds-max-medium-table--stacked-horizontal"><!--Table must be responsive-->
<thead>
<tr class="slds-text-heading--label ">
<th class="" scope="col">Account Name</th>
<th class="slds-is-sortable" scope="col">Account Number</th>
<th class="slds-is-sortable" scope="col">Account Source</th>
<th class="slds-is-sortable" scope="col">Active</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.accounts}" var="account">
<tr class="slds-hint-parent">
<td data-label="Account Name" >
<a href="{! '#/sObject/' + account.Id + '/view'}">{!account.Name}</a>
</td>
<td data-label="Account Number" >{!account.AccountNumber}</td>
<td data-label="Account Source" >{!account.AccountSource}</td>
<td data-label="Active">{!account.Active__c}</td>
</tr>
</aura:iteration>
</tbody>
</table>
<ui:button class="slds-button slds-button--neutral slds-p-horizontal--xx-small slds-m-right--x-small slds-float--right" press="{!c.Next}" disabled="{!v.next}" >
<span class="slds-icon slds-icon-text-default">
<c:SVG class="slds-button__icon slds-button__icon--large" xlinkHref="/resource/SLDS/assets/icons/utility-sprite/svg/symbols.svg#chevronright" />
<span class="slds-assistive-text">Next</span>
</span>
</ui:button>
<ui:button class="slds-button slds-button--neutral slds-p-horizontal--xx-small slds-m-right--x-small slds-float--right" press="{!c.Previous}" disabled="{!v.prev}">
<span class="slds-icon slds-icon-text-default">
<c:SVG class="slds-button__icon slds-button__icon--large" xlinkHref="/resource/SLDS/assets/icons/utility-sprite/svg/symbols.svg#chevronleft" />
<span class="slds-assistive-text">Previous</span>
</span>
</ui:button>
</div>
</aura:component>
Client-Side Controller-
({
/**
* Webkul Software.
*
* @category Webkul
* @author Webkul
* @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/
getAccounts : function(cmp, evt, helper) {
var next = false;
var prev = false;
helper.getAccounts(cmp,next,prev);
},
Next:function(cmp,event,helper){
var next = true;
var prev = false;
var offset = cmp.get("v.offset");
helper.getAccounts(cmp,next,prev,offset);
},
Previous:function(cmp,event,helper){
var next = false;
var prev = true;
var offset = cmp.get("v.offset");
helper.getAccounts(cmp,next,prev,offset);
},
})
Helper-
({
/**
* Webkul Software.
*
* @category Webkul
* @author Webkul
* @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/
getAccounts : function(cmp,next,prev,offset) {
offset = offset || 0;
var action = cmp.get("c.getacc");
action.setParams({
"next" : next,
"prev" : prev,
"off" : offset
});
action.setCallback(this,function(res){
var state = res.getState();
if(state=="SUCCESS"){
var result = res.getReturnValue();
cmp.set('v.offset',result.offst);
cmp.set('v.accounts',result.acc);
cmp.set('v.next',result.hasnext);
cmp.set('v.prev',result.hasprev);
}
});
$A.enqueueAction(action);
}
})
Output:
Here is the output:
Support:
That’s all for implementation of pagination in lightning component, still have any issue feel free to add a ticket and let us know your views to make the code better https://webkul.uvdesk.com/en/customer/create-ticket/
. . .
Your email address will not be published. Required fields are marked *