Pager Buttons

Data Table With Pagination Buttons in Lightning Component

Lightning Component

Sharing is caring!

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
Step 1 : Create Apex Class Controller.
Apex class [samplePagerCtrl.apxc]

  • 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]

JS controller [SamplePagerController.js]

  • See code comments 🙂
JS Helper [SamplePagerHelper.js]

  • See code comments 🙂
Lightning App [TestApp.app]

 

pagination

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

Sharing is caring!

(Visited 10,884 times, 1 visits today)

20 comments

  • 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=“{!v.page > 1}”>
                   <ui:button press=“{!c.previousPage}” label=“Previous Page”/>
                </aura:if>
                <aura:if isTrue=“{!v.page &lt; v.pages}”>
                   <ui:button aura:id=“nextbtn” press=“{!c.nextPage}” label=“Next Page”/>
                </aura:if>
             </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>
          
        <ul class=“slds-has-dividers–top”>
             <!–iterate account records–>
             <aura:iteration items=“{!v.Accounts}” var=“account”>
                <li class=“slds-item”>{!account.Name}</li>
             </aura:iteration>
        </ul>
    </div>
    </aura:component>

     

  • 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
      Thanks

    • 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
      aura:iteration

      and in your js code add new function

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

      now you can get specify account ID on click on the checkbox
      Hops it helps
      thanks
      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.
      thanks

  • 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!!

     

    Thanks,

     

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

Leave a Reply