You need to sign in to do that
Don't have an account?
Naresh Kumar 106
How to implement pagination in lightning component?
Can anyone please help me to implement pagination using lightning component?
function readOnly(count){ }
You need to sign in to do that
Don't have an account?
http://www.sfdcmonkey.com/2017/01/26/display-record-with-pager-buttons-lightning-component/Hopes it helps
thanks
http://piyushparmar01.blogspot.in/2017/02/pagination-on-lightning-component.html
Cheers
You can basically use lightning:radioGroup for the paging buttons.
Display records using Pagination(number display) in Lightning Component
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.
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;}
}
}
Highlighted is my sample code. I'd appreciate any work around at the moment am getting errors!
// 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);
}
})