Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
meghna nmeghna n 

pagination inside lightning component

I have a requirement where I need to implement pagination in lightning component.

At present just for simplicity I am displaying account Names

I need something like this

[First  button]  [Last button]  [Prev button]  [Next Button]

Please let me know with some working code.

thanks
meghna
 
Anant KamatAnant Kamat
Use this inside the component
<div style="height: 200px;">
                <div class="slds-align_absolute-center">
                    <lightning:button variant="brand" aura:id="first" label="First" onclick="{!c.firstPage}" />
                    <lightning:button variant="brand" aura:id="next" label="Next" onclick="{!c.nextPage}" />
                    <lightning:button variant="brand" aura:id="prev" label="Prev" onclick="{!c.prevPage}" />
                    <lightning:button variant="brand" aura:id="last" label="Last" onclick="{!c.lastPage}" />
                </div>
            </div>

Here is the code for controller.js
Inside your controller method where you are getting the data to be displayed, you need to do the below

//Method to fetch the data
methodName: function(component, event, helper) {
        var recId = component.get('v.recordId');
        //Setting the column data
        var fieldName = event.getParam("fieldName");
        
        var action = component.get("c.Apex Controller Method Name");
        action.setParams({
            "fieldName": fieldName
        });
        action.setCallback(this, function(a) {
            component.set("v.List of Values", a.getReturnValue());
            component.set("v.current List of Values", a.getReturnValue());
            var records = component.get("v.currentList");
            component.find("prev").set("v.disabled", true);
            //Max Page gives the value for number of pages. I have put 5 since my requirement was to display 5 records in a page.
            component.set("v.maxPage", Math.floor((records.length + 4) / 5));
        });
        $A.enqueueAction(action);
    },


firstPage: function(component, event, helper) {
        component.find("prev").set("v.disabled", true);
        component.find("next").set("v.disabled", false);
        component.set("v.pageNumber", 1);
    },

    prevPage: function(component, event, helper) {
        component.find("next").set("v.disabled", false);
        component.set("v.pageNumber", Math.max(component.get("v.pageNumber") - 1, 1));
    },

    nextPage: function(component, event, helper) {
        component.find("prev").set("v.disabled", false);
        component.set("v.pageNumber", Math.min(component.get("v.pageNumber") + 1, component.get("v.maxPage")));
    },

    lastPage: function(component, event, helper) {
        component.find("next").set("v.disabled", true);
        component.find("prev").set("v.disabled", false);
        component.set("v.pageNumber", component.get("v.maxPage"));
    }

Let me know if it works