Apex Class:
public class AccountController { @AuraEnabled//Get Account Records public static List<Account> getAccountList(Integer pageSize, Integer pageNumber){ Integer offset = (pageNumber - 1) * pageSize; List<Account> accList = new List<Account>(); accList = [SELECT Id, Name, AccountNumber, Industry, Phone FROM Account LIMIT :pageSize OFFSET :offset]; return accList; } }
Lightning Component:
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" controller="AccountController"> <!--Declare Attributes--> <aura:attribute name="accList" type="Account[]"/> <aura:attribute name="pageNumber" type="Integer" default="1"/> <aura:attribute name="pageSize" type="Integer" default="10"/> <aura:attribute name="isLastPage" type="Boolean" default="false"/> <aura:attribute name="dataSize" type="Integer" default="0"/> <!--Declare Handler--> <aura:handler name="init" action="{!c.doInit}" value="{!this}"/> <!--Component Start--> <div class="slds-m-around--xxx-large"> <lightning:card> <aura:set attribute="title"> Account </aura:set> <aura:set attribute="footer"> <div class="slds-align_absolute-center"> <div class="slds-p-right_xx-small"> <lightning:button label="Prev" onclick="{!c.handlePrev}" disabled="{! v.pageNumber == 1}" variant="brand" iconName="utility:back" name="prev"/> </div> <span class="slds-badge slds-badge_lightest"> Page {!v.pageNumber} | Showing records from {! ((v.pageNumber-1)*v.pageSize)+' to '+((v.pageNumber-1)*v.pageSize+v.dataSize)} </span> <div class="slds-p-left_xx-small"> <lightning:button label="Next" disabled="{!v.isLastPage}" onclick="{!c.handleNext}" variant="brand" iconName="utility:forward" iconPosition="right" name="next"/> </div> </div> </aura:set> <table class="slds-table slds-table_cell-buffer slds-table_bordered"> <thead> <tr class="slds-line-height_reset slds-text-title_caps"> <th class="slds-is-resizable" scope="col"> <div class="slds-truncate" title="Name"> Name </div> </th> <th class="slds-is-resizable" scope="col"> <div class="slds-truncate" title="Account Number"> Account Number </div> </th> <th class="slds-is-resizable" scope="col"> <div class="slds-truncate" title="Industry"> Industry </div> </th> <th class="slds-is-resizable" scope="col"> <div class="slds-truncate" title="Phone"> Phone </div> </th> <th scope="col"> <div class="slds-truncate" title="Actions">Actions</div> </th> </tr> </thead> <aura:if isTrue="{!v.accList.length > 0}"> <tbody> <aura:iteration items="{!v.accList}" var="acc"> <tr class="slds-hint-parent"> <th data-label="Name" scope="row"> <div class="slds-truncate" title="{!acc.Name}"> {!acc.Name} </div> </th> <td data-label="Account Number"> <div class="slds-truncate" title="{!acc.AccountNumber}">{!acc.AccountNumber}</div> </td> <td data-label="Industry"> <div class="slds-truncate" title="{!acc.Industry}">{!acc.Industry}</div> </td> <td data-label="Phone"> <div class="slds-truncate" title="{!acc.Phone}">{!acc.Phone}</div> </td> <td data-label="Action"> <lightning:buttonIcon name="{!acc.Id}" iconName="utility:delete" title="Delete" variant="bare" onclick="{!c.handleDeleteAccount}" alternativeText="Delete" /> </td> </tr> </aura:iteration> </tbody> </aura:if> </table> <aura:if isTrue="{!empty(v.accList)}"> <div class="slds-align_absolute-center"> No records found </div> </aura:if> </lightning:card> </div> <!--Component End--> </aura:component>
Lightning JS Controller :
({ doInit : function(component, event, helper) { helper.getAccounts(component, event); }, handleNext : function(component, event, helper) { var pageNumber = component.get("v.pageNumber"); component.set("v.pageNumber", pageNumber+1); helper.getAccounts(component, helper); }, handlePrev : function(component, event, helper) { var pageNumber = component.get("v.pageNumber"); component.set("v.pageNumber", pageNumber-1); helper.getAccounts(component, helper); }, handleDeleteAccount: function (component, event, helper) { alert('Selected Account to delete - ' + event.getSource().get("v.name")); }, })
Lightning JS Helper:
({ getAccounts : function(component, event) { var action = component.get("c.getAccountList"); action.setParams({ 'pageSize' : component.get("v.pageSize"), 'pageNumber' : component.get("v.pageNumber") }); action.setCallback(this,function(response) { var state = response.getState(); if (state === "SUCCESS") { var result = response.getReturnValue(); if(result.length < component.get("v.pageSize") || result.length == 0){ component.set("v.isLastPage", true); } else{ component.set("v.isLastPage", false); } component.set("v.dataSize", result.length); component.set("v.accList", result); } }); $A.enqueueAction(action); }, })