Data Table With Pagination Buttons in 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.

Step 1 : Create Apex Class Controller.

Apex class [samplePagerCtrl.apxc]

public with sharing class samplePagerCtrl {
   @AuraEnabled
 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;
        obj.page = (Integer) pageNumber;
        obj.total = [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="{!v.page == 1}" variant="brand" label="Previous Page" onclick="{! c.navigate }" />            
                <lightning:button disabled="{!v.page == v.pages}" aura:id="previousPage" variant="brand" label="Next Page" onclick="{! c.navigate }" />
            </div>
            <p class="slds-page-header__title slds-truncate">{!v.total} Accounts • page {!v.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"/>
            </ui:inputSelect>
        </div>
        
        <table class="slds-table slds-table_bordered slds-table_cell-buffer">
            <thead>
                <tr class="slds-text-title_caps">
                    <th scope="col">
                        <div class="slds-truncate" title="Name">Account Name</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.Accounts}" var="account"> 
                    <tr>
                        <th scope="row" data-label="Opportunity Name">
                            <div class="slds-truncate" title="{!account.Name}">{!account.Name}</div>
                        </th>
                    </tr>
                </aura:iteration>	
            </tbody>
        </table>
    </div>
</aura:component>

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("v.page") || 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("v.page") || 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 
      action.setParams({
         "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.page", result.page);
         component.set("v.total", result.total);
         component.set("v.pages", Math.ceil(result.total / recordToDisply));

      });
      // enqueue the action 
      $A.enqueueAction(action);
   }
})

• See code comments 🙂

Lightning App [TestApp.app]

<aura:application extends="force:slds">
   <c:SamplePager/>
  <!-- here c: is org. namespace prefix-->
</aura:application>

 

Related Resources :

• OFFSET using in SOQL
• Aura:iteration

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. 🙂