Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ 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
sfdcMonkey.comsfdcMonkey.com
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;}
    }
  
}
AlimaliAlimali
Hello new in developing, currently working on how to restrict multiple checkboxes on pagination buttons with inline checkox to pick records not greater than 12 in lighrtning component.

User-added image 
Highlighted is my sample code. I'd appreciate any work around at the moment am getting errors!

 
Sagar Nagvekar 29Sagar Nagvekar 29
Refer this code for pagination in lightning component :-
// The server-side Apex class
public with sharing class OpportunityController
{
    @AuraEnabled
    public static List<Opportunity> getOpportunities()
    {
        List<Opportunity> oppList = [SELECT Id, Name, StageName, CloseDate, Amount FROM Opportunity
             Where Amount!= Null order by Name ASC limit 30000];
        return oppList;
    }

    // This method is used for retrieving the list of opportunity records based on the search string
    @AuraEnabled
    public static List<Opportunity> getByName(String searchKey)
    {
        String name = '%' + searchKey + '%';
        List<Opportunity> oppList = [SELECT id, Name, StageName, CloseDate, Amount FROM Opportunity
               WHERE name LIKE :name and Amount!= Null order by Name ASC limit 30000];
        return oppList;
    }
}

<!-- The application file whose preview can be done Opportunity_PaginationTableApp.app -->
<aura:application >
    <c:Opportunity_PaginationTable/>
</aura:application>

<!-- The component file Opportunity_PaginationTable.cmp -->
<aura:component controller="OpportunityController" implements="force:appHostable,flexipage:availableForAllPageTypes">
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <aura:attribute name="opportunityList" type="Opportunity[]" />
    <aura:attribute name="paginationList" type="Opportunity[]"/>
    <aura:attribute name="pageSize" type="Integer" default="5"/>
    <aura:attribute name="totalSize" type="Integer"/>
    <aura:attribute name="start" type="Integer" />
    <aura:attribute name="end" type="Integer"/>

    <table>
        <tr>
            <td style="width:5%">
            Show
            </td>

            <td style="width:7%">
                <ui:inputSelect aura:id="records" change="{!c.onSelectChange}">
                    <ui:inputSelectOption text="5" value="5"/>
                    <ui:inputSelectOption text="10" value="10"/>
                    <ui:inputSelectOption text="20" value="20"/>
                    <ui:inputSelectOption text="30" value="30"/>
                </ui:inputSelect>
           </td>

           <td>Entries</td>
           <td style="width:7%">Search</td>
           <td style="width:25%">
               <ui:inputText aura:id="input1" change="{!c.searchKeyChange}" required="true"></ui:inputText>
           </td>
       </tr>
    </table>

    <table class="slds-table slds-table–bordered">
        <thead>
            <tr style="background-color:#6cbcd2;color:white;font-weight:bold">
                <th>Name</th>
                <th>Stage</th>
                <th>Closedate</th>
                <th>Amount</th>
            </tr>
        </thead>

        <tbody>
            <aura:iteration items="{!v.paginationList}" var="item">
                <tr>
                    <td><ui:outputText value="{!item.Name}" /></td>
                    <td><ui:outputText value="{!item.StageName}" /></td>
                    <td><ui:outputText value="{!item.CloseDate}" /></td>
                    <td><ui:outputText value="{!item.Amount}" /></td>
                </tr>
            </aura:iteration>

            <lightning:button label="First" disabled="{!v.start == 0}" onclick="{!c.first}" />
            <lightning:button label="Previous" disabled="{!v.start == 0}"  onclick="{!c.previous}" />
            <lightning:button label="Next" disabled="{!v.end >= v.totalSize-1}" onclick="{!c.next}" />
            <lightning:button label="Last" disabled="{!v.end >= v.totalSize-1}" onclick="{!c.last}" />
        </tbody>
    </table>
</aura:component>

// The client-side controller file Opportunity_PaginationTableController.js
({
    doInit : function(component, event, helper)
    {
        var pageSize = component.get("v.pageSize");
        var action = component.get("c.getOpportunities");

        action.setCallback(this, function(response)
        {
            var state = response.getState();

            if (component.isValid() && state === "SUCCESS")
            {
                component.set('v.opportunityList', response.getReturnValue());
                component.set("v.totalSize", component.get("v.opportunityList").length);
                component.set("v.start", 0);
                component.set("v.end", pageSize-1);
                var paginationList = [];

                for(var i=0; i< pageSize; i++)
                {
                    paginationList.push(response.getReturnValue()[i]);
                }

                component.set('v.paginationList', paginationList);
           }
       });

       $A.enqueueAction(action);
    },
    onSelectChange : function(component, event, helper)
    {
        var selected = component.find("records").get("v.value");
        component.set("v.pageSize", selected);
        component.set("v.start", 0);
        component.set("v.end", selected-1);    
        var paginationList = [];
        var oppList = component.get("v.opportunityList");

        for(var i=0; i< selected; i++)
        {
            paginationList.push(oppList[i]);
        }

        component.set('v.paginationList', paginationList);
    },
    searchKeyChange: function(component, event)
    {
        var searchKey = component.find("input1").get("v.value");
        console.log(searchKey);
        var action = component.get("c.getByName");
        var keysize = component.get("v.totalSize");
        var pageSize = component.get("v.pageSize");
        
        action.setParams({
            "searchKey": searchKey
        });

        action.setCallback(this, function(response)
        {
            var state = response.getState();

            if (component.isValid() && state === "SUCCESS")
            {
                component.set('v.opportunityList', response.getReturnValue());
                component.set("v.totalSize", component.get("v.opportunityList").length);
                var paginationList = [];
                var retrievedTotalSize = component.get("v.totalSize");
                 
                for(var i=0; i < pageSize; i++)
                {
                    paginationList.push(response.getReturnValue()[i]);
                }

                component.set('v.paginationList', paginationList);
                component.set("v.start", 0);
                component.set("v.end", pageSize-1);        
            }
        });
        $A.enqueueAction(action);
    },
    first : function(component, event, helper)
    {
        var oppList = component.get("v.opportunityList");
        var pageSize = component.get("v.pageSize");
        var paginationList = [];

        for(var i=0; i< pageSize; i++)
        {
            paginationList.push(oppList[i]);
        }

        component.set('v.paginationList', paginationList);
        component.set("v.start", 0);
        component.set("v.end", pageSize-1);
    },
    last : function(component, event, helper)
    {
        var oppList = component.get("v.opportunityList");
        var pageSize = component.get("v.pageSize");
        var totalSize = component.get("v.totalSize");
        var paginationList = [];
        var start = component.get("v.start");              
        var end = component.get("v.end");
        
        do
        {
            start = parseInt(start) + parseInt(pageSize);
            end = parseInt(end) + parseInt(pageSize);    
        } while(end < totalSize);
        
        start = start - parseInt(pageSize);
        end = end - parseInt(pageSize);        
        var counter = 0;
        var EndPlusOne = end + 1;
        
        if(totalSize > EndPlusOne)
        {
            //alert('totalSize is greater than EndPlusOne');  
        }
        else
        {
            start = start - parseInt(pageSize);
            end = end - parseInt(pageSize);
        }

        var EndAddOne = end + 1;
        var endPlusPageSizePlusOne = end + parseInt(pageSize) + 1;
        
        for(var i = EndAddOne; i < endPlusPageSizePlusOne; i++)
        {
            if(oppList.length > end)
            {
                if(i > -1)
                {
                    paginationList.push(oppList[i]);
                    counter ++ ;
                }
            }
        }

        start = start + counter;
        end = end + counter;
        component.set('v.paginationList', paginationList);
        component.set("v.start",start);  
        component.set("v.end",end);
    },
    next : function(component, event, helper)
    {
        var oppList = component.get("v.opportunityList");
        var end = component.get("v.end");        
        var start = component.get("v.start");
        var pageSize = component.get("v.pageSize");
        var totalSize = component.get("v.totalSize");
        var paginationList = [];
        var counter = 0;        
        var EndPlusOne = end + 1;
        var EndPlusPageSizePlusOne = end + parseInt(pageSize) + 1;
        
        for(var i = EndPlusOne; i < EndPlusPageSizePlusOne; i++)
        {
            if(oppList.length > end)
            {
                paginationList.push(oppList[i]);
                counter ++ ;
            }
        }
        
        start = start + counter;
        end = end + counter;
        component.set("v.start",start);        
        component.set("v.end",end);        
        component.set('v.paginationList', paginationList);
    },
    previous : function(component, event, helper)
    {
        var oppList = component.get("v.opportunityList");
        var end = component.get("v.end");
        var start = component.get("v.start");
        var pageSize = component.get("v.pageSize");
        var paginationList = [];
        var counter = 0;

        for(var i= start-pageSize; i < start ; i++)
        {
            if(i > -1)
            {
                paginationList.push(oppList[i]);
                counter ++;
            }
            else
            {
                start++;
            }
        }
        start = start - counter;
        end = end - counter;
        component.set("v.start", start);
        component.set("v.end",end);
        component.set('v.paginationList', paginationList);
    }
})