Pager Buttons

Data Table With Pagination Buttons in Lightning Component

Lightning Component

Last Updated : spring 18, 2/11/2018

In this example we are seeing that, How to display records with Pagination/Pager buttons on salesforce lightning component. We also create a drop-down to set the numbers of record display to the page .

Prerequisites : basic understanding of Lightning Component. and Apex Programming.

pagination in lightning
Step 1 : Create Apex Class Controller.
Apex class [samplePagerCtrl.apxc]
public with sharing class samplePagerCtrl {
 public static AccountPagerWrapper fetchAccount(Decimal pageNumber ,Integer recordToDisply) {
      Integer pageSize = recordToDisply;
      Integer offset = ((Integer)pageNumber - 1) * pageSize;
    // create a instance of wrapper class.
    AccountPagerWrapper obj =  new AccountPagerWrapper();
    // set the pageSize,Page(Number), total records and accounts List(using OFFSET)   
        obj.pageSize = pageSize; = (Integer) pageNumber; = [SELECT count() FROM account];
        obj.accounts = [SELECT Id, Name,Phone FROM Account ORDER BY Name LIMIT :recordToDisply OFFSET :offset];
    // return the wrapper class instance .
        return obj;
 // create a wrapper class with @AuraEnabled Properties    
 public class AccountPagerWrapper {
    @AuraEnabled public Integer pageSize {get;set;}
    @AuraEnabled public Integer page {get;set;}
    @AuraEnabled public Integer total {get;set;}
    @AuraEnabled public List<Account> accounts {get;set;}
  • In the above apex class we have a @AuraEnabled method which is takes 2 parameters.
  • Next we are create a wrapper/inner class in our controller class with 4 @AuraEnabled properties
  • And in the fetchAccount method we are create a instance of wrapper class and set the @AuraEnabled properties .
  • And return the wrapper class instance.
  • In above apex class i’m using OFFSET for display the results in multiple pages.
  • See code comments 🙂
Step 2 : Create Lightning Component.
Component [SamplePager.cmp]
<aura:component controller="samplePagerCtrl">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="Accounts" type="Account[]"/>
    <aura:attribute name="page" type="integer" description="using for store page Number"/>
    <aura:attribute name="pages" type="integer" description="using for store All Pages page Number"/>
    <aura:attribute name="total" type="integer" description="total records count store "/>
    <div class="slds-m-around_small">
        <div class="slds-page-header" role="banner">
            <div class="slds-align_absolute-center">            
                <lightning:button disabled="{! == 1}" variant="brand" label="Previous Page" onclick="{! c.navigate }" />            
                <lightning:button disabled="{! == v.pages}" aura:id="previousPage" variant="brand" label="Next Page" onclick="{! c.navigate }" />
            <p class="slds-page-header__title slds-truncate">{!} Accounts • page {!} / {!v.pages}</p>
            <ui:inputSelect aura:id="recordSize" label="Display Record Per Page: " change="{!c.onSelectChange}">
                <ui:inputSelectOption text="10" label="10" value="true"/>
                <ui:inputSelectOption text="15" label="15"/>
                <ui:inputSelectOption text="20" label="20"/>
        <table class="slds-table slds-table_bordered slds-table_cell-buffer">
                <tr class="slds-text-title_caps">
                    <th scope="col">
                        <div class="slds-truncate" title="Name">Account Name</div>
                <aura:iteration items="{!v.Accounts}" var="account"> 
                        <th scope="row" data-label="Opportunity Name">
                            <div class="slds-truncate" title="{!account.Name}">{!account.Name}</div>
JS controller [SamplePagerController.js]
   doInit: function(component, event, helper) {
      // this function call on the component load first time     
      // get the page Number if it's not define, take 1 as default
      var page = component.get("") || 1;
      // get the select option (drop-down) values.   
      var recordToDisply = component.find("recordSize").get("v.value");
      // call the helper function   
      helper.getAccounts(component, page, recordToDisply);
   navigate: function(component, event, helper) {
      // this function call on click on the previous page button  
      var page = component.get("") || 1;
      // get the previous button label  
      var direction = event.getSource().get("v.label");
      // get the select option (drop-down) values.  
      var recordToDisply = component.find("recordSize").get("v.value");
      // set the current page,(using ternary operator.)  
      page = direction === "Previous Page" ? (page - 1) : (page + 1);
      // call the helper function
      helper.getAccounts(component, page, recordToDisply);
   onSelectChange: function(component, event, helper) {
      // this function call on the select opetion change,	 
      var page = 1
      var recordToDisply = component.find("recordSize").get("v.value");
      helper.getAccounts(component, page, recordToDisply);
  • See code comments 🙂
JS Helper [SamplePagerHelper.js]
   getAccounts: function(component, page, recordToDisply) {

      // create a server side action. 
      var action = component.get("c.fetchAccount");
      // set the parameters to method 
         "pageNumber": page,
         "recordToDisply": recordToDisply
      // set a call back   
      action.setCallback(this, function(a) {
         // store the response return value (wrapper class insatance)  
         var result = a.getReturnValue();
         console.log('result ---->' + JSON.stringify(result));
         // set the component attributes value with wrapper class properties.   

         component.set("v.Accounts", result.accounts);
         component.set("v.pages", Math.ceil( / recordToDisply));

      // enqueue the action 
  • See code comments 🙂
Lightning App []
<aura:application extends="force:slds">
  <!-- here c: is org. namespace prefix-->


pagination in lightning

Related Resources :

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box. 🙂


  • Above controller name is Not correct in lightning component. That is why    you are facing this issue.
    <aura:component controller=samplePagerCtrl>
       <!—Use Salesforce Lightning Design System CSS From Static resources–>  
       <ltng:require styles=“{!$Resource.slds24Sep + ‘/assets/styles/salesforce-lightning-design-system.css’}”/>
       <aura:handler name=“init” value=“{!this}” action=“{!c.doInit}” />
       <aura:attribute name=“Accounts” type=“Account[]”/>
       <aura:attribute name=“page” type=“integer” description=“using for store page Number”/>
       <aura:attribute name=“pages” type=“integer” description=“using for store All Pages page Number”/>
       <aura:attribute name=“total” type=“integer” description=“total records count store “/>
    <div class=“slds-m-around–medium”>
          <div class=“slds-page-header” role=“banner”>
             <div class=“slds-align–absolute-center”>
                <aura:if isTrue=“{! > 1}”>
                   <ui:button press=“{!c.previousPage}” label=“Previous Page”/>
                <aura:if isTrue=“{! &lt; v.pages}”>
                   <ui:button aura:id=“nextbtn” press=“{!c.nextPage}” label=“Next Page”/>
             <p class=“slds-page-header__title slds-truncate”>{!} Accounts • page {!} / {!v.pages}</p>
             <ui:inputSelect aura:id=“recordSize” label=“Display Record Per Page: “ change=“{!c.onSelectChange}”>
                <ui:inputSelectOption text=“10” label=“10” value=“true”/>
                <ui:inputSelectOption text=“15” label=“15”/>
                <ui:inputSelectOption text=“20” label=“20”/>
        <ul class=“slds-has-dividers–top”>
             <!–iterate account records–>
             <aura:iteration items=“{!v.Accounts}” var=“account”>
                <li class=“slds-item”>{!account.Name}</li>


  • Hi, In the above code, you are making 3 server calls for next, prev and initialization, is there any way to make one server call, so that i can make row able actions.

    • hi , which type row able actions do you want to create can you do more specific about your requirement please

    • hi for done this, you have need to add ui:inputCheckbox in aura:iteration part and get value in js controller by event.

      aura:iteration items="{!v.leads}" var="account"
      li class="slds-item" {!account.Name} ui:inputCheckbox name="{!account.Id}" click="{!c.getSelectedVal}" li

      and in your js code add new function

      getSelectedVal : function(component,event,helper){
      var x = event.getSource().get("");
      } ,

      now you can get specify account ID on click on the checkbox
      Hops it helps
      NOTE: in this comment box HTML tags not support properly so try to refine it in your code,{ add and close tags properly}

  • Hi thanks for this, but when you go back the checkbox gets deselected as the it is calling server again and new list is being generated.

    • yes after the move to next or prev. page checkboxes are deselected due to new records list update, and i don’t think it’s good practice to fetch all date in single server calling then it’s take more time to load data on UI and you can set the number of records you want to display in single page then select the checkboxes and get the selected account and then do your actions for selected record and then move next and do action again for next page record same as salesforce stranded functionality.

  • Hi Sfdc,

    <aura:iteration items=”{!v.Accounts}” var=”account” indexVar=”index”>

    I am using thi indexvar attribute for the serial number on your code.But When i click next button it again starts with serial no from 1 to 10 for the next page.

    So how can i fix this from your help!!




    • The maximum offset Limit is 2,000 rows. Requesting an offset greater than 2,000 results in a NUMBER_OUTSIDE_VALID_RANGE error.

  • Hi its very good article and helping a lot, can you please update its test class. so we will have an idea on writing a test class also. This makes to complete one requirement.

  • Hi I am trying to work with this code i am trying to display the data but there is a bug on displaying. could find what the error is. Could you please help me.

Leave a Reply