Now it is working on single click all accounts are opening, but I need to open one account at a time.
Component :
<aura:attribute name="Accounts" type="Account[]"/>
<aura:attribute name="page" type="integer" description="using for store page Number"/>
<aura:attribute name="pages" type="integer" description="using for store All Pages page Number"/>
<aura:attribute name="total" type="integer" description="total records count store "/>
<p class="slds-text-title_caps">
Account
</p>
<div class="slds-p-around--large" >
<aura:iteration items="{!v.Accounts}" var="account" aura:id="accID" >
<div class="slds-page-header" style="cursor: pointer;" data-record="{!idx}" onclick="{!c.sectionOne}" >
<section class="slds-clearfix" >
<div class="slds-float--left ">
<lightning:icon class="slds-show" aura:id="articleOne" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
<lightning:icon class="slds-hide" aura:id="articleOne" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
</div>
<div class="slds-m-left--large" ><ui:outputText aura:id="Id" value="{!account.Name}" />
</div>
</section>
</div>
<div class="slds-hide slds-p-around--medium" aura:id="articleOne" >
<table class="slds-table slds-table--bordered slds-table--cell-buffer slds-table--striped slds-max-medium-table--stacked-horizontal"
role="grid">
<thead >
<tr>
<th class="slds-is-sortable slds-cell-wrap" scope="col">
Account name
</th>
<th class="slds-is-sortable slds-cell-wrap" scope="col">
Contact Name
</th>
<th class="slds-is-sortable slds-cell-wrap" scope="col">
Phone
</th>
<th class="slds-is-sortable slds-cell-wrap" scope="col">
Mailing City
</th>
<th class="slds-is-sortable slds-cell-wrap" scope="col">
Mailing Country
</th>
<th class="slds-is-sortable slds-cell-wrap" scope="col">
Contact ID
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!account.Contacts}" var="con" >
<tr class="slds-hint-parent">
<td role="gridcell" class="slds-cell-wrap" data-label="Name">
{!account.Name}
</td>
<td role="gridcell" class="slds-cell-wrap" data-label="accName">
{!con.Name}
</td>
<td role="gridcell" class="slds-cell-wrap" data-label="prName">
{!con.Phone}
</td>
<td role="gridcell" class="slds-cell-wrap" data-label="manuName">
{!con.MailingCity}
</td>
<td role="gridcell" class="slds-cell-wrap" data-label="manuName">
{!con.MailingCountry }
</td>
<td role="gridcell" class="slds-cell-wrap" data-label="manuName">
{!con.Id}
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
<div class="slds-hide slds-p-around--medium" aura:id="articleOne">
<table class="slds-table slds-table--bordered slds-table--cell-buffer slds-table--striped slds-max-medium-table--stacked-horizontal"
role="grid">
<thead >
<tr>
<th class="slds-is-sortable slds-cell-wrap" scope="col">
Account name
</th>
<th class="slds-is-sortable slds-cell-wrap" scope="col">
Opportunity Name
</th>
<th class="slds-is-sortable slds-cell-wrap" scope="col">
StageName
</th>
<th class="slds-is-sortable slds-cell-wrap" scope="col">
CloseDate
</th>
<th class="slds-is-sortable slds-cell-wrap" scope="col">
Probability
</th>
<th class="slds-is-sortable slds-cell-wrap" scope="col">
Opportunity ID
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!account.Opportunities}" var="opp">
<tr class="slds-hint-parent">
<td role="gridcell" class="slds-cell-wrap" data-label="Name">
{!account.Name}
</td>
<td role="gridcell" class="slds-cell-wrap" data-label="accName">
{!opp.Name}
</td>
<td role="gridcell" class="slds-cell-wrap" data-label="prName">
{!opp.StageName}
</td>
<td role="gridcell" class="slds-cell-wrap" data-label="manuName">
{!opp.CloseDate}
</td>
<td role="gridcell" class="slds-cell-wrap" data-label="manuName">
{!opp.Probability}
</td>
<td role="gridcell" class="slds-cell-wrap" data-label="manuName">
{!opp.Id}
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</aura:iteration>
</div>
<!-- FOOTER -->
<footer class="slds-card__footer">
<!-- LAYOUT GRID -->
<div class="slds-grid slds-grid_align-spread">
<lightning:button disabled="{!v.page == 1}" variant="brand" label="Previous Page" onclick="{! c.navigate }" />
<lightning:button disabled="{!v.page == v.pages}" aura:id="previousPage" variant="brand" label="Next Page" onclick="{! c.navigate }" />
</div>
<p class="slds-align_absolute-center">{!v.total} Accounts • page {!v.page} / {!v.pages}</p>
<ui:inputSelect aura:id="recordSize" label="Display Record Per Page: " change="{!c.onSelectChange}">
<ui:inputSelectOption text="10" label="10" value="true"/>
<ui:inputSelectOption text="20" label="20"/>
<ui:inputSelectOption text="40" label="40"/>
<ui:inputSelectOption text="60" label="60"/>
<ui:inputSelectOption text="80" label="80"/>
<ui:inputSelectOption text="100" label="100"/>
<ui:inputSelectOption text="120" label="120"/>
<ui:inputSelectOption text="140" label="140"/>
<ui:inputSelectOption text="160" label="160"/>
</ui:inputSelect>
<!-- / LAYOUT GRID -->
</footer>
<!-- / FOOTER -->
Controller :
({
doInit: function(component, event, helper) {
// this function call on the component load first time
// get the page Number if it's not define, take 1 as default
var page = component.get("v.page") || 1;
// get the select option (drop-down) values.
var recordToDisply = component.find("recordSize").get("v.value");
// call the helper function
helper.getAccounts(component, page, recordToDisply);
},
navigate: function(component, event, helper) {
// this function call on click on the previous page button
var page = component.get("v.page") || 1;
// get the previous button label
var direction = event.getSource().get("v.label");
// get the select option (drop-down) values.
var recordToDisply = component.find("recordSize").get("v.value");
// set the current page,(using ternary operator.)
page = direction === "Previous Page" ? (page - 1) : (page + 1);
// call the helper function
helper.getAccounts(component, page, recordToDisply);
},
onSelectChange: function(component, event, helper) {
// this function call on the select option change,
var page = 1
var recordToDisply = component.find("recordSize").get("v.value");
helper.getAccounts(component, page, recordToDisply);
},
sectionOne: function(component, event, helper) {
helper.helperFun(component,event,'articleOne');
},
})
Helper:
({
getAccounts: function(component, page, recordToDisply) {
var action = component.get("c.fetchAccount");
action.setParams({
"pageNumber": page,
"recordToDisply": recordToDisply
});
action.setCallback(this, function(a) {
var result = a.getReturnValue();
console.log('result ---->' + JSON.stringify(result));
component.set("v.Accounts", result.accounts);
component.set("v.page", result.page);
component.set("v.total", result.total);
component.set("v.pages", Math.ceil(result.total / recordToDisply));
});
$A.enqueueAction(action);
},
helperFun : function(component,event,articleOne) {
//var accValue = component.find("accID").get("v.value");
//console.log(component.find("accID").get("v.value"));
var acc = component.find(articleOne);
for(var cmp in acc) {
$A.util.toggleClass(acc[cmp], 'slds-hide');
$A.util.toggleClass(acc[cmp], 'slds-show');
}
},
})
Apex :
public with sharing class samplePagerCtrl {
@AuraEnabled
public static AccountPagerWrapper fetchAccount(Decimal pageNumber ,Integer recordToDisply) {
Integer pageSize = recordToDisply;
Integer offset = ((Integer)pageNumber - 1) * pageSize;
// create a instance of wrapper class.
AccountPagerWrapper obj = new AccountPagerWrapper();
// set the pageSize,Page(Number), total records and accounts List(using OFFSET)
obj.pageSize = pageSize;
obj.page = (Integer) pageNumber;
obj.total = [SELECT count() FROM account];
obj.accounts = [SELECT id, AccountNumber, Name, Industry, Type,
(SELECT Id,Account.name, Name, Phone,MailingCity,MailingCountry FROM Contacts),
(SELECT Id,Account.name,Name,StageName,CloseDate,Probability FROM Opportunities)
FROM Account ORDER BY Name LIMIT :recordToDisply OFFSET :offset];
//obj.contacts = [SELECT Id, Name FROM Contact where Account.Id = '' ORDER BY Name LIMIT:5 ];
// return the wrapper class instance .
return obj;
}
// create a wrapper class with @AuraEnabled Properties
public class AccountPagerWrapper {
@AuraEnabled public Integer pageSize {get;set;}
@AuraEnabled public Integer page {get;set;}
@AuraEnabled public Integer total {get;set;}
@AuraEnabled public List<Account> accounts{get;set;}
//@AuraEnabled public List<Contact> contacts{get;set;}
}
}
sectionOne, and the helper functionhelperFunare relevant.