You need to sign in to do that
Don't have an account?

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