Lightning Component – Sort Records on Select Picklist Value

I have created lightning component to sort records on selecting field name in picklist and radio button for ascending or descending then on click Apply sort button, it was working, When I add pagination for the same, sorting is not working as expected, pagination is working fine
enter image description here

Apex Code :

    public with sharing class Scrapcontroller{
    @AuraEnabled
    public static AccountDataTableWrapper getAccountData(Decimal pageNumber, 
        Decimal pageSize,String sortField,boolean isAsc) {

        Integer pSize = (Integer)pageSize;
        Integer pNumber = (Integer)pageNumber;
        Integer offset = (pNumber - 1) * pSize;
        Integer totalRecords = [SELECT COUNT() FROM Account];
        Integer recordEnd = pSize * pNumber;
        String sql = 'SELECT  AccountNumber, Name,  Industry, Type ';
        sql += 'From account';
        system.debug('sortField-->' + sortField);
        system.debug('sortField-->' + isAsc);

         if (sortField != '') {
         sql += ' order by ' + sortField ;
         if (isAsc) {
            sql += ' asc ';
          } else {
            sql += ' desc ';
          }
        }

        system.debug('The query is' + sql);
        //Instance of Contact DataTable Wrapper Class
        AccountDataTableWrapper objDT =  new AccountDataTableWrapper();  
        objDT.pageSize = pSize;
        objDT.pageNumber = pNumber;
        objDT.recordStart = offset + 1;
        objDT.recordEnd = totalRecords >= recordEnd ? recordEnd : totalRecords;
        objDT.totalRecords = totalRecords;
        //objDT.accountList = [SELECT  AccountNumber, Name,  Industry, Type FROM Account ORDER BY Name LIMIT :pSize OFFSET :offset];
        objDT.accountList = database.query(sql + ' LIMIT :pSize OFFSET :offset');

        return objDT;    
    }
      //Wrapper Class For Contact DataTable  
       public class AccountDataTableWrapper {
        @AuraEnabled
        public Integer pageSize {get;set;}
        @AuraEnabled
        public Integer pageNumber {get;set;}
        @AuraEnabled
        public Integer totalRecords {get;set;}
        @AuraEnabled
        public Integer recordStart {get;set;}
        @AuraEnabled
        public Integer recordEnd {get;set;}
        @AuraEnabled
        public List<Account> accountList {get;set;}  

    } 
}

Lightning Component :

<aura:component controller="Scrapcontroller">
        <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
        <aura:attribute name="Accounts" type="Account[]"/>
        <aura:attribute name="PageNumber" type="integer" default="1"/>
        <aura:attribute name="TotalPages" type="integer" default="0"/>
        <aura:attribute name="TotalRecords" type="integer" default="0"/>
        <aura:attribute name="RecordStart" type="integer" default="0"/>
        <aura:attribute name="RecordEnd" type="integer" default="0"/>
        <aura:attribute name="isAsc" type="boolean" default="true" description="boolean flag for pass sorting condition to apex class"/> 
        <!--For Radio Button-->
        <aura:attribute  name="options" type="List" default="[
                 {'label': 'Asc', 'value': 'Yes'},
                 {'label': 'Dsc', 'value': 'No'}]"/> <!--Radio Button Close-->
        <aura:attribute name="radioValue" type="String" default="Yes"/>
        <aura:attribute name="selectedPicklist" type="string"/>

    <div class="slds-m-around_large">
        <div class="slds-page-header" role="banner" width="100%">
            <div class="slds-text-heading_medium slds-text-align_center ">Grid Buddy</div>
        </div>
    </div>

       <div class="slds-m-around_large">
         <div class="slds-page-header" role="banner" width="100%">
           <table  class=" slds-table slds-table_bordered slds-table_cell-buffer ">
             <thead>
                <th>
                  <div class="slds-size_1-of-3">
                    <lightning:select name="select1"  label="sorts" aura:id="pickval" required="true"  onchange="{!c.handleChange}"   >
                        <option value=" ">Select To Sort</option>
                        <option value="Name">Name</option> 
                        <option value="AccountNumber">Account Number</option> 
                        <option value="Industry">Industry </option> 
                        <option value="Type">Type </option> 
                    </lightning:select>
                 </div>
               </th>
               <th>
                   <lightning:radioGroup  name="radioGroup" 
                        label="Radio Group"
                        options="{!v.options}"
                        value="{!v.radioValue}"
                        type="radio"/>
               </th>
               <th>
                   <lightning:button 
                        variant="brand" 
                        label="Apply Sorts" 
                        onclick="{!c.handleChange}"  
                        title="Apply Sorts"/>
                </th>
                 <tr class="slds-text-title_caps ">
                    <th scope="col"><div class="slds-truncate" title="Name">Account Name</div></th> 
                    <th><div class="slds-truncate" title="AccountNumber">AccountNumber</div></th>
                    <th> <div class="slds-truncate" title="Industry">Industry </div></th>
                    <th> <div class="slds-truncate" title="Type">Type</div></th>
                 </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.Accounts}" var="acc">  
                <tr><th scope="row">
                    <div class="slds-truncate" title="{!acc.Name}">{!acc.Name}</div>
                    </th>
                <th scope="row">
                    <div class="slds-truncate" title="{!acc.AccountNumber}">{!acc.AccountNumber}</div>
                    </th>
                <th scope="row">
                    <div class="slds-truncate" title="{!acc.Industry}">{!acc.Industry}</div>
                    </th>
                <th scope="row">
                    <div class="slds-truncate" title="{!acc.Type}">{!acc.Type}</div></th>
                </tr>
             </aura:iteration>
            </tbody>
        </table>
             </div></div>
          <div class="slds-clearfix">
            <div class="slds-page-header" role="banner">
                <div class="slds-float_right">            
                    <lightning:button disabled="{!v.PageNumber == 1}" variant="brand" aura:id="prevPage" label="Prev" onclick="{!c.handlePrev}" />            
                    <lightning:button disabled="{!v.PageNumber == v.TotalPages}" aura:id="nextPage" variant="brand" label="Next" onclick="{!c.handleNext}"/>
                </div>
                <p class="slds-page-header__title">{!v.RecordStart}-{!v.RecordEnd} of {!v.TotalRecords} | Page {!v.PageNumber} of {!v.TotalPages}</p>
            </div>
            <div class="slds-float_right">
              <ui:inputSelect aura:id="pageSize" label="Display Records 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>
            <br/>
          </div>
        </div>
    Selected picklist is : {!v.pikValue}
    Selected radio is : {!v.radioValue}
</aura:component>

Lightning Controller : 

({ 
    doInit: function(component, event, helper) {
        var pageNumber = component.get("v.PageNumber");  
        var pageSize = component.find("pageSize").get("v.value"); 
        helper.onLoad(component,event, pageNumber, pageSize, 'Name');
    },

    handleNext: function(component, event, helper) {
        var pageNumber = component.get("v.PageNumber");  
        var pageSize = component.find("pageSize").get("v.value");
        pageNumber++;
        helper.onLoad(component,event, pageNumber, pageSize, 'Name');
    },

    handlePrev: function(component, event, helper) {
        var pageNumber = component.get("v.PageNumber");  
        var pageSize = component.find("pageSize").get("v.value");
        pageNumber--;
        helper.onLoad(component,event, pageNumber, pageSize, 'Name');
    },

    onSelectChange: function(component, event, helper) {
        var page = 1
        var pageSize = component.find("pageSize").get("v.value");
        helper.onLoad(component,event, page, pageSize, 'Name');
    },

     handleChange : function(component, event, helper){
        var pikValue = component.find("pickval").get("v.value");
        helper.sortHelper(component, event, pikValue);  
    },  

 })

Lightning Helper :

({
    onLoad: function(component,event, pageNumber, pageSize, sortField) {
        var action = component.get("c.getAccountData");
        action.setParams({
            "pageNumber": pageNumber,
            "pageSize": pageSize,
            "sortField": sortField,       
            "isAsc": component.get("v.isAsc"),
        });
        action.setCallback(this, function(result) {
            var state = result.getState();
            if (component.isValid() && state === "SUCCESS"){
                var resultData = result.getReturnValue();
                component.set("v.Accounts", resultData.accountList);
                component.set("v.PageNumber", resultData.pageNumber);
                component.set("v.TotalRecords", resultData.totalRecords);
                component.set("v.RecordStart", resultData.recordStart);
                component.set("v.RecordEnd", resultData.recordEnd);
                component.set("v.TotalPages", Math.ceil(resultData.totalRecords / pageSize));
            }
        });
        $A.enqueueAction(action);
    },


     sortHelper: function(component, event, sortFieldName) {
       var currentRadio = component.get("v.radioValue");
       if (currentRadio == 'Yes') {
          component.set("v.radioValue", 'Asc');
          component.set("v.isAsc", true);
       }else {
          component.set("v.radioValue", 'Desc');
          component.set("v.isAsc", false);
       }
       this.onLoad(component, event,pageNumber, pageSize, sortFieldName);
    }

})

I am getting error in this line : this.onLoad(component, event,pageNumber, pageSize, sortFieldName); pageNumber not defined

Please help me out in passing parameters

Best Answer

In onload helper method,change action.setParams like below.

  onLoad: function(component,event, pageNumber, pageSize, sortField) {
    var action = component.get("c.getAccountData");
    action.setParams({
        "pageNumber": pageNumber,
        "pageSize": pageSize,
        "sortField": sortField,       
        "isAsc": component.get("v.isAsc")
    });

or

you can try like this:

  doInit:function(component, event, helper) {
     helper.onLoad(component,event,helper);
    }

same thing you can try in helper method as well

  onLoad:unction(component,event,helper){

    var pageNumbers = component.get("v.PageNumber");  
    var pageSize = component.find("pageSize").get("v.value"); 
  //and all other fields you are using in action.setParams
  }

Instead of passing value from javascript controller to helper.Directly access those values in Helper side.

In case of any Null value you  have to do Null check also.
Related Topic