1

I'm facing a problem in a lot of my components lately, it's when I try to retrieve a list of records, and I try to put a pagination too.

I had already build some components with a list and pagination and they were working great, but for a few days those components aren't working anymore.

When I launch my component I get something like that :enter image description here

The list of accounts aren't displayed (but I have a lot of accounts in my organisation) and the number of page are "NaN". What does that means ? Instead of having NaN I should see something like "page 1/3" with 3 the total of pages.

For example I just tried to recreate this tutorial to display a simple list and pagination, but I still get the same kind of error.

For example here is the code : Component :

 <aura:component controller="E_samplePagerCtrl">

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

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

<div class="slds-m-around--medium">
  <div class="slds-page-header" role="banner">
     <div class="slds-align--absolute-center">
        <aura:if isTrue="{!v.page > 1}">
           <ui:button press="{!c.previousPage}" label="Previous Page"/>
        </aura:if>
        <aura:if isTrue="{!v.page &lt; v.pages}">
           <ui:button aura:id="nextbtn" press="{!c.nextPage}" label="Next Page"/>
        </aura:if>
     </div>
     <p class="slds-page-header__title slds-truncate">{!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="15" label="15"/>
        <ui:inputSelectOption text="20" label="20"/>
     </ui:inputSelect>
  </div>

 <ul class="slds-has-dividers--top">
     <!--iterate account records-->
     <aura:iteration items="{!v.Accounts}" var="account">
        <li class="slds-item">{!account.Name}</li>
     </aura:iteration>
</ul>
</div>
</aura:component>

the controller js :

({
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);

},

previousPage: 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);

},

nextPage: function(component, event, helper) {
  // this function call on click on the next page button   
  var page = component.get("v.page") || 1;
  // get the next 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 + 1)"
  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 opetion change,    
  var page = 1
  var recordToDisply = component.find("recordSize").get("v.value");
  helper.getAccounts(component, page, recordToDisply);
},

})

the helper :

({
 getAccounts: function(component, page, recordToDisply) {

  // create a server side action. 
  var action = component.get("c.fetchAccount");
  // set the parameters to method 
  action.setParams({
     "pageNumber": page,
     "recordToDisply": recordToDisply
  });
  // set a call back   
  action.setCallback(this, function(a) {
     // store the response return value (wrapper class insatance)  
     var result = a.getReturnValue();
     console.log('result ---->' + JSON.stringify(result));
     // set the component attributes value with wrapper class properties.   

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

  });
  // enqueue the action 
  $A.enqueueAction(action);
 }
 })

And the apex controller :

public with sharing class E_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, Name,Phone FROM Account ORDER BY Name LIMIT :recordToDisply OFFSET :offset];
// 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;}
}
}

EDIT

I try exactly the same code in a second org (still a developper org) and this time the code works ! So the problem comes from the first org, so do you have any idea of what's could go wrong in the first org ?

1
2

Replace your return statement to as below and make the return type as String,

In controller,

return JSON.serialize(obj);

And in helper parse the return value getReturnValue();

 var result = JSON.parse(a.getReturnValue());
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.