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

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .