Custompagination in Lightning Component-Salesforce

//Apex Class:- ContactAuraController
// What is Offset in SOQL ?
// Using OFFSET in SOQL
public class ContactAuraController
{
@AuraEnabled
public static ContactWrapperClass getContactData(Decimal pageNumber, Decimal pageSize)
{
system.debug('Prev pageNumber>>>>>'+pageNumber);
system.debug('Prev pageSize>>>>>'+pageSize);
Integer pSize = (Integer)pageSize;
Integer pNumber = (Integer)pageNumber;
system.debug('After pSize>>>>>'+pSize);
system.debug('After pNumber>>>>>'+pNumber);

//Offset for SOQL
Integer offset = (pNumber - 1) * pSize;
system.debug('offset>>>>>'+offset);

//Total Records
Integer totalRecords = [SELECT COUNT() FROM Contact];
Integer recordEnd = pSize * pNumber;
system.debug('recordEnd>>>>>'+recordEnd);

//Instance of Contact Wrapper Class
ContactWrapperClass objCnct = new ContactWrapperClass();

objCnct.pageSize = pSize;
objCnct.pageNumber = pNumber;
objCnct.recordStart = offset + 1;
objCnct.recordEnd = totalRecords >= recordEnd ? recordEnd : totalRecords;
objCnct.totalRecords = totalRecords;


objCnct.lstContact=[SELECT Id, Name, Phone, Email FROM Contact ORDER BY Name LIMIT :pSize OFFSET :offset];
system.debug('objCnct>>>>>'+objCnct);
return objCnct;
}

//Wrapper Class For Contact
public class ContactWrapperClass
{
@AuraEnabled
public Integer pageSize {get;set;}
@AuraEnabled
public Integer pageNumber {get;set;}
@AuraEnabled
public Integer totalRecords {get;set;}
@AuraEnabled
public Integer recordStart {get;set;}
@AuraEnabled
public Integer recordEnd {get;set;}
@AuraEnabled
public List<Contact> lstContact {get;set;}
}
}
<!--ContactAuraComponent Pagination -->

<aura:component controller="ContactAuraController">

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

<aura:attribute name="wrapperClass" type="object" />
<aura:attribute name="PageNumber" type="integer" default="1"/>
<aura:attribute name="PageSize" type="integer" default="10"/>

<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"/>



<!-- aura handler with waiting and donewaiting events-->
<aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
<aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
<!--create a component attributs -->
<aura:attribute name="Spinner" type="boolean" default="false"/>







<div class="slds-m-around_xx-large">


<!--loading spinner start... style=Brand Medium (blue dots)-->
<aura:if isTrue="{!v.Spinner}">
<div aura:id="spinnerId" class="slds-spinner_container">
<div class="slds-spinner--brand slds-spinner slds-spinner--large slds-is-relative" role="alert">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
</aura:if>
<!-- Loading spinner end-->




<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title_caps">
<th scope="col">
<strong><div class="slds-truncate" title="Name">Name</div></strong>
</th>
<th scope="col">
<strong><div class="slds-truncate" title="Phone">Phone</div></strong>
</th>
<th scope="col">
<strong><div class="slds-truncate" title="Email">Email</div></strong>
</th>
</tr>
</thead>
<tbody>

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

</div>
</aura:component>
//Controller.js
({
doInit: function(component, event, helper)
{
debugger;
var pageNumber = component.get("v.PageNumber"); //get value from component
var pageSize = component.get("v.PageSize") //get value from component
helper.getContactList(component, pageNumber, pageSize);

},
handleNext: function(component, event, helper) {
debugger;
var pageNumber = component.get("v.PageNumber"); //get value from component
var pageSize = component.get("v.PageSize") //get value from component
pageNumber++;
helper.getContactList(component, pageNumber, pageSize);
},

handlePrev: function(component, event, helper) {
debugger;
var pageNumber = component.get("v.PageNumber"); //get value from component
var pageSize = component.get("v.PageSize") //get value from component
pageNumber--;
helper.getContactList(component, pageNumber, pageSize);
},
// this function automatic call by aura:waiting event
showSpinner: function(component, event, helper) {
// make Spinner attribute true for display loading spinner
component.set("v.Spinner", true);
},

// this function automatic call by aura:doneWaiting event
hideSpinner : function(component,event,helper){
// make Spinner attribute to false for hide loading spinner
component.set("v.Spinner", false);
}
})
//Helper.js
({
getContactList : function(component, pageNumber, pageSize)
{
debugger;
var action = component.get("c.getContactData"); //fetch records from Apex Controller."getContactData" is a method
//By action.setParams param pass in getContactData method
action.setParams({
"pageNumber": pageNumber,
"pageSize": pageSize
});
action.setCallback(this, function(result)
{
debugger;
var state = result.getState();
if (component.isValid() && state === "SUCCESS")
{
debugger;
var resultData = result.getReturnValue();
component.set("v.wrapperClass", resultData);

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));
}
});
$A.enqueueAction(action);
}
})
//ContactAuraApp
<aura:application extends="force:slds">
<c:ContactAuraComponent></c:ContactAuraComponent>
</aura:application>

OutPut:-

Leave a Reply