I am facing issue while doing pagination, each page displays 10 records. The records are getting displayed only when i click on next button, before that it just shows me total number of pages as below:
Lightning Comp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride" controller = "SearchController" access="global" >
<aura:attribute name="searchResult" type="List" description="store and display account list return from server"/>
<aura:attribute name="searchResultSAP" type="List" description="store and display account list return from server"/>
<!-- searchKeyword,searchKeyword1,searchKeyword2,searchKeyword3,searchKeyword4 variable are created in order to
search records when either of the input fields are entered -->
<aura:attribute name="searchKeyword" type="String" description="use for store user search input"/>
<aura:attribute name="searchKeyword1" type="String" description="use for store user search input"/>
<aura:attribute name="searchKeyword2" type="String" description="use for store user search input"/>
<aura:attribute name="searchKeyword3" type="String" description="use for store user search input"/>
<aura:attribute name="picvalue" type="List"/>
<aura:attribute name="searchKeyword4" type="String" description="use for store user search input"/>
<aura:attribute name="recordTypeName" type="String" default=""/>
<aura:attribute name ="recordTypeId" type="String" default=""/>
<aura:attribute name="displayEndUserButton" type="boolean" default="false"/>
<aura:attribute type="Integer" name="pageNumber" default="1" required="true" />
<aura:attribute type="Integer" name="maxPage" default="1" required="true" />
<aura:attribute type="String" name="sortField" />
<aura:attribute type="Boolean" name="sortAsc" />
<aura:handler name="change" value="{!v.pageNumber}" action="{!c.renderPage}" />
<aura:attribute type="Account[]" name="currentList" />
<!--Declare Handler-->
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!-- SHOW LOADING SPINNER-->
<lightning:spinner variant="brand" size="large" aura:id="Id_spinner" class="slds-hide" />
<div class="slds-box slds-theme_default">
<!--<aura:attribute name="newAccount" type="Object"/> -->
<div class="slds-page-header">
<div class="slds-grid">
<lightning:icon iconName="standard:account" size="medium"/>
<div class="slds-col slds-has-flexi-truncate">
<p class="slds-text-title_caps slds-line-height_reset">Account</p>
<h1 class="slds-page-header__title slds-m-right_small slds-align-middle slds-truncate" title="My Account"> Account Search</h1>
</div>
</div>
</div>
<lightning:layout>
<lightning:layoutItem padding="around-small">
<div class="header-column">
<p class="field-title" title="Field 4"><strong>Account Search</strong></p>
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small">
<div class="header-column">
<p class="field-title" title="Field 4"><a href="javascript:void(0)" onclick="{!c.resetSearchStatus}">Reset Search</a></p>
</div>
</lightning:layoutItem>
</lightning:layout>
<lightning:layout horizontalAlign="space">
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="header-column">
<p class="field-title" title="Search by">Search by</p>
<p>Search Criteria: </p>
</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:input aura:id="searchField" type="text" value="{!v.searchKeyword}" Name="Last Name" label ="Account Name"/>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:input aura:id="searchField" type="text" value="{!v.searchKeyword1}" Name="Address" label ="Address"/>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:input aura:id="searchField" type="text" value="{!v.searchKeyword2}" Name="City" label ="City"/>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:input aura:id="searchField" type="text" value="{!v.searchKeyword3}" Name="Zip" label ="Zip"/>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<lightning:select value="{!v.searchKeyword4}" label="State">
<option value="">--None--</option>
<aura:iteration items="{!v.picvalue}" var="s">
<option value="{!s}">{!s}</option>
</aura:iteration>
</lightning:select>
</lightning:layoutItem>
</lightning:layout>
<!-- TOTAL RECORDS BADGES
<div class="slds-m-around_x-small">
<lightning:badge label="{!v.TotalNumberOfRecord}" />
</div> -->
<!-- ERROR MESSAGE IF NOT RECORDS FOUND-->
<aura:if isTrue="{!v.Message}">
<div class="slds-notify_container slds-is-relative">
<div class="slds-notify slds-notify_toast slds-theme_error" role="alert">
<div class="slds-notify__content">
<h2 class="slds-text-heading_small">No Records Found...</h2>
</div>
</div>
</div>
</aura:if>
<lightning:layout>
<lightning:layoutItem>
<lightning:button variant="brand" label="Search for Account" title="search action" onclick="{!c.Search}"/>
</lightning:layoutItem>
</lightning:layout>
<div class="slds-p-top_large">
<div class="slds-page-header">
<div class="slds-grid">
<div class="slds-col slds-has-flexi-truncate">
<p class="slds-page-header__title slds-m-right_small slds-align-middle slds-truncate">Accounts Already in Salesforce</p>
</div>
<div class="slds-button-group" role="group">
<div class="slds-p-right_xx-small">
<aura:if isTrue="{!v.displayEndUserButton}">
<lightning:button variant="brand" label="Create End User Account" title="Brand action" onclick="{!c.createEndUserAccount}" />
</aura:if>
</div>
<lightning:button variant="brand" label="Cancel" title="Brand action" onclick="{!c.cancelButton}" />
<!-- <button class="slds-button slds-button_neutral"> Create End User Account </button>-->
<!-- <button variant="brand" class="slds-button slds-button_neutral"> Cancel </button>-->
</div>
</div>
</div>
</div>
<!-- TABLE CONTENT-->
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title_caps">
<th scope="col">
<div onclick="{!c.sortByName}" class="slds-truncate" title="Account Name">Account Name <aura:if isTrue="{!v.sortField=='Name'}">
<span>
<aura:if isTrue="{!v.sortAsc}">
↑
<aura:set attribute="else">
↓
</aura:set>
</aura:if>
</span>
</aura:if></div>
</th>
<th scope="col">
<div onclick="{!c.sortByIndustry}" class="slds-truncate" title="Record Type ID">Record Type ID <aura:if isTrue="{!v.sortField=='RecordType'}">
<span>
<aura:if isTrue="{!v.sortAsc}">
↑
<aura:set attribute="else">
↓
</aura:set>
</aura:if>
</span>
</aura:if></div>
</th>
<th scope="col">
<div onclick="{!c.sortByAnnualRevenue}" class="slds-truncate" title="Street">Street <aura:if isTrue="{!v.sortField=='CityAdd'}">
<span>
<aura:if isTrue="{!v.sortAsc}">
↑
<aura:set attribute="else">
↓
</aura:set>
</aura:if>
</span>
</aura:if></div>
</th>
<th scope="col">
<div class="slds-truncate" title="City">City</div>
</th>
<th scope="col">
<div class="slds-truncate" title="State">State</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Postal Code">Postal Code</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Selling Territory">Selling Territory</div>
</th>
</tr>
</thead>
<tbody>
<!--### display all records of searchResult attribute by aura:iteration ###-->
<aura:iteration items="{!v.currentList}" var="acc" indexVar="count">
<tr>
<td>
<div class="slds-truncate"><a href="{!'/one/one.app?#/sObject/'+ acc.Id + '/view'}" target="_top">{!acc.Name}</a></div>
</td>
<td>
<div class="slds-truncate">{!acc.RecordType.Name}</div>
</td>
<td>
<div class="slds-truncate">{!acc.BillingStreet}</div>
</td>
<td>
<div class="slds-truncate">{!acc.BillingCity}</div>
</td>
<td>
<div class="slds-truncate">{!acc.BillingState}</div>
</td>
<td>
<div class="slds-truncate">{!acc.BillingPostalCode}</div>
</td>
<td>
<div class="slds-truncate"><a href="{!'/one/one.app?#/sObject/'+ acc.Territory__r.Id + '/view'}" target="_top">{!acc.Territory__r.Name}</a></div>
</td>
</tr>
</aura:iteration>
</tbody>
<div class="slds-button-group" role="group">
<button onclick="{!c.prevPage}" class="slds-button slds-button--neutral">
Prev
</button>
<button class="slds-button slds-button--neutral">
{!v.pageNumber} / {!v.maxPage}
</button>
<button onclick="{!c.nextPage}" class="slds-button slds-button--neutral">
Next
</button>
</div>
</table>
</div>
JSController
({
//Load Account Industry Picklist
doInit: function(component, event, helper) {
var pickvar = component.get("c.getPickListValuesIntoList");
pickvar.setCallback(this, function(response) {
var state = response.getState();
if(state === 'SUCCESS'){
var list = response.getReturnValue();
component.set("v.picvalue", list);
}
else if(state === 'ERROR'){
alert('ERROR OCCURED.');
}
})
$A.enqueueAction(pickvar);
},
Search : function(component, event, helper) {
var searchField = component.find('searchField');
helper.SearchHelper(component, event);
helper.sortBy(component, "Name");
event.preventDefault();
},
resetSearchStatus : function(component, event, helper) {
component.set("v.searchKeyword","");
component.set("v.searchKeyword1","");
component.set("v.searchKeyword2","");
component.set("v.searchKeyword3","");
component.set("v.searchKeyword4","");
},
createAccountUsingSAP: function(component, event, helper) {
},
cancelButton : function (component, event, helper) {
var urlEvent = $A.get("e.force:navigateToURL");
urlEvent.setParams({
"url": "/lightning/o/Account/home"
});
urlEvent.fire();
},
prevPage: function(component, event, helper) {
component.set("v.pageNumber", Math.max(component.get("v.pageNumber")-1, 1));
},
nextPage: function(component, event, helper) {
component.set("v.pageNumber", Math.min(component.get("v.pageNumber")+1, component.get("v.maxPage")));
},
sortByName: function(component, event, helper) {
helper.sortBy(component, "Name");
},
sortByIndustry: function(component, event, helper) {
helper.sortBy(component, "RecordType");
},
sortByAnnualRevenue: function(component, event, helper) {
helper.sortBy(component, "CityAdd");
},
renderPage: function(component, event, helper) {
helper.renderPage(component);
}
})
Helper
({
SearchHelper: function(component, event) {
component.find("Id_spinner").set("v.class" , 'slds-show');
var action = component.get("c.fetchAccountRecords");
action.setParams({
'searchKeyWord': component.get("v.searchKeyword"),
'searchKeyWord1': component.get("v.searchKeyword1"),
'searchKeyWord2': component.get("v.searchKeyword2"),
'searchKeyWord3': component.get("v.searchKeyword3"),
'searchKeyWord4': component.get("v.searchKeyword4"),
'recId': component.get("v.recordId")
});
action.setCallback(this, function(response) {
component.find("Id_spinner").set("v.class" , 'slds-hide');
var state = response.getState();
if (state === "SUCCESS") {
component.set ("v.displayEndUserButton",true);
var storeResponse = response.getReturnValue();
if (storeResponse.length == 0) {
component.set("v.Message", true);
} else {
component.set("v.Message", false);
}
component.set("v.searchResult", storeResponse);
component.set("v.maxPage", Math.floor((storeResponse.length+9)/10));
var action2 = component.get("c.searchSAP");
action2.setParams({
'nameToSearch': component.get("v.searchKeyword"),
'addressToSearch': component.get("v.searchKeyword1"),
'cityToSearch': component.get("v.searchKeyword2"),
'zipToSearch': component.get("v.searchKeyword3"),
'stateToSearch': component.get("v.searchKeyword4"),
});
debugger;
action2.setCallback(this, function(response) {
var state1 = response.getState();
if (state1 === "SUCCESS") {
var storeResponseSAP = JSON.parse(response.getReturnValue());
component.set("v.searchResultSAP", storeResponseSAP);
}
});
$A.enqueueAction(action2);
}
});
$A.enqueueAction(action);
},
sortBy: function(component, field) {
var sortAsc = component.get("v.sortAsc"),
sortField = component.get("v.sortField"),
records = component.get("v.searchResult");
sortAsc = sortField != field || !sortAsc;
records.sort(function(a,b){
var t1 = a[field] == b[field],
t2 = (!a[field] && b[field]) || (a[field] < b[field]);
return t1? 0: (sortAsc?-1:1)*(t2?1:-1);
});
component.set("v.sortAsc", sortAsc);
component.set("v.sortField", field);
component.set("v.searchResult", records);
this.renderPage(component);
},
renderPage: function(component) {
var records = component.get("v.searchResult"),
pageNumber = component.get("v.pageNumber"),
pageRecords = records.slice((pageNumber-1)*10, pageNumber*10);
component.set("v.currentList", pageRecords);
}
})
