+ Start a Discussion
Naresh Kumar 106Naresh Kumar 106 

How to implement pagination in lightning component?

Can anyone please help me to implement pagination using lightning component?
Andy BoettcherAndy Boettcher
Please refer to this post:  https://developer.salesforce.com/forums/?id=906F00000005HN6IAM
{!Piyush_soni__c}{!Piyush_soni__c}
here is sample example for display records with pagination/pager buttons on lightning componenet
http://www.sfdcmonkey.com/2017/01/26/display-record-with-pager-buttons-lightning-component/Hopes it helps
thanks
piyush parmarpiyush parmar
You can find out sample code for pagination on lightning components by client side. 

http://piyushparmar01.blogspot.in/2017/02/pagination-on-lightning-component.html

Cheers
Umang SinghalUmang Singhal
you can refer https://umangsinghal.wordpress.com/2017/05/05/salesforce/ and ask for code in the email mentioned
michael sorianomichael soriano
I just wrote this today: http://michaelsoriano.com/how-to-create-simple-pagination-using-lightning-components-and-apex/
You can basically use lightning:radioGroup for the paging buttons. 

lightning pagination

 
Salesforce CodesSalesforce Codes
Here be the best answer
Display records using Pagination(number display) in Lightning Component
User-added image
http://salesforcecodes.com/display-records-using-paginationnumber-display-in-lightning-component/ (http://salesforcecodes.com/display-records-using-paginationnumber-display-in-lightning-component/" target="_blank)


In this scenario we have shown, how to display pagination in Lightning Component. Pagination will be in numbers display format.
Shubham Bansal 45Shubham Bansal 45

Refer this Understandable and easy code of pagination.

Component:

 

<aura:component controller="pageWOWrapp" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="Count" type="Integer[]" default ="[1]"/>
    <aura:attribute name="page" type="Integer"/>
    <aura:attribute name="offset" type="Integer" default ="0"/>
    <aura:attribute name="Acclist" type="Account[]"/>
     <aura:attribute name="lastPage" type="Integer"/>    
    <aura:handler name="init" value="{!this}" action="{!c.loadData}"/>
    <table>
        <div  class="slds-p-around_small"  style="font-size:180%">
        <tr> 
            <th>Name</th>    
        </tr>
        </div>
        <aura:iteration items="{!v.Acclist}" var="d">
            <div  class="slds-p-around_small"  style="font-size:180%">
                <tr>
                    <td>{!d.Name}  </td>
                </tr>
            </div>
        </aura:iteration>
    </table>
    <div  class="slds-align_absolute-center">
        
        <lightning:button disabled ="{!v.offset==0}" label="Previous" variant="brand" onclick="{!c.doPrevious}"/>
        <lightning:button disabled ="{!v.offset==v.lastPage}" label="Next" variant="success" onclick="{!c.doNext}"/>
        
    </div>
    <br/><br/><br/>
    <div class="slds-align_absolute-center">
  <aura:iteration items="{!v.Count}" var="d">
         <lightning:button name="{!d}" label="{!d}" onclick="{!c.doNavigate}"/>
     </aura:iteration>
    </div>
    
</aura:component>

 

 

JS:

 

({
    loadData : function(component, event, helper) {
     helper.abc(component, event, helper);
    },
    
   doNext : function(component, event, helper) {
       var a = component.get('v.offset');
       var b = a+10;
       component.set('v.offset',b);
   
       helper.abc(component, event, helper);
   },
   
     doPrevious : function(component, event, helper) {
           var d = 0;
         var c = component.get('v.offset');
            d = c-10;
         
          component.set('v.offset',d);
         helper.abc(component, event, helper);  
   },
    
    
    doNavigate: function(component, event, helper) {
        
        var eventSource =  event.getSource().get('v.name');
        var m = parseInt(eventSource);
        var p = (m - 1)*10;
        component.set('v.offset',p);
         helper.abc(component, event, helper);
        
        
    }
})

 

Helper:

 

({
    abc : function(component, event, helper) {
        var action = component.get('c.getConList');
        action.setParams({
            offset : component.get('v.offset')
        });
        
        action.setCallback(this,function(response){
            var responseValue = response.getReturnValue();
           
            component.set('v.Acclist',responseValue.acc);
            
            var k = responseValue.total;
            var i=0
            var listOfpage = [];
            for(i=1;i<=k;i++)
            {
                listOfpage.push(i);
            }
            component.set('v.Count',listOfpage);
            var m = (k-1)*10;
            component.set('v.lastPage',m);
            
            
        });
        $A.enqueueAction(action,false);
    }
})

 

Apex Controller:

 

public class pageWOWrapp {
   @AuraEnabled
     public static WraperClass getConList(Integer offset) 
    {
        WraperClass result = new WraperClass();
        
       result.acc = [Select id, Name From Account order by Name limit 10  OFFSET :offset];
        Decimal sh = [Select Count() from Account];
        result.total = math.ceil(sh/10);
         return result;   
        
    }
    
    public class WraperClass {
        @AuraEnabled public Decimal total {get; set;}
        @AuraEnabled public  List<Account> acc {get; set;}
    }
  
}