Pagination In Lightning Component

This blog is a continuation of ‘Dispalying Data Table in Lightning'.  If you haven't read that blog and want to read click here . In that blog we simply queried Accounts and displayed on lightning component. 

 

The Salesforce Lightning component framework uses a stateful client and stateless server architecture. So we need to take a slightly different approach to do pagination than traditional VF. In order to maintain the value of offset. This is how we are doing.

In Server Side Controller:

We have a wrapper class AccountWrapper which wraps Accounts need to be displayed in accList, hasNext, hasPrev and offset. Server side action returns instance of AccountWrapper.

In Client Side Controller :

We have 4 action functions

      1) doinit  :

This action function invokes on page load. Querying accounts with default page size.

      2)   prev  :

This action function invokes after pressing Prev button.

      3)   next :

This action function invokes after pressing the Next button.

      4)   selectChangeHandler :

Action function invoking after changing page size in the pick-list.

Code : 
=============================================================
Component : DataTablePagination

<aura:component controller="DataTableController">
    <ltng:require styles="{! $Resource.SLDS105 + '/assets/styles/salesforce-lightning-design-system.css'}"/>
    <aura:attribute name="accountList" type="Account[]"/>
    <aura:attribute name="offset" type="String" default="0"/>
    <aura:attribute name="hasNext" type="boolean" default="false"/>
    <aura:attribute name="hasPrev" type="boolean" default="false"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <!-- init is a predefined event sent to every component. After the component is initialized,-->
    <div class= "container slds-p-top--medium">
<div id="list" class= "row">
                <table  class="slds-table slds-table--bordered slds-table--striped">
                     <thead>
                        <tr>
                            <th scope="col"><span class=
                                "slds-text-heading--medium">AccountNumber</span></th>
                            <th scope="col"><span class="slds-text-heading--medium">Name</span>
                               </th>
                            <th scope="col"><span class="slds-text-heading--medium">Industry</span>                                    </th>
                            <th scope="col"><span class="slds-text-heading--medium">Type</span></th>
                        </tr>
                    </thead>
                    <tbody>
       <aura:iteration items="{!v.accountList}" var="acc">
      <tr>
                                 <td>{!acc.AccountNumber}</td>
                                 <td>{!acc.Name}</td>
                                 <td>{!acc.Industry}</td>
                                 <td>{!acc.Type}</td>
                     </tr>

</aura:iteration>
                      </tbody>
            </table>
           </div>
          </div>
    <div class="slds-select_container">
            <lightning:select aura:Id = "selectItem" name="selectItem" label="Size"
                   onchange="{!c.selectChangeHandler}" >
                <option value="3" label = "3"/>
                <option value="6" label = "6"/>
                <option value="9" label = "9"/>
            </lightning:select>
    </div>
            <ui:button aura:id="buttonPrev" buttonTitle="Prev" class="button" label="Prev" press="                 {!c.prev}" disabled="{!v.hasPrev}"/>
            <ui:button aura:id="buttonNext" buttonTitle="Next" class="button" label="Next" press="                  {!c.next}" disabled="{!v.hasNext}"/>


</aura:component>
============================================================
Client side Controller : DataTablePaginationController.js

({
    doInit : function(component, event, helper) {
        var prevVar = false;
        var nextVar = false;
        helper.helperMethod(component, prevVar, nextVar)                 
        },
    
      next : function(component, event, helper) {
    var prevVar = false;
        var nextVar = true;
helper.helperMethod(component, prevVar, nextVar)                           
         },
         
      prev : function(component, event, helper) {
        var prevVar = true;
        var nextVar = false;
        helper.helperMethod(component, prevVar, nextVar)                 
         },
    selectChangeHandler : function(component, event, helper) {
        var prevVar = false;
        var nextVar = false;
        helper.helperMethod(component, prevVar, nextVar)                 
         }

})

Client side Controller Helper : DataTablePaginationHelper.js

({
helperMethod : function(component, prevVar, nextVar) {
          var action = component.get("c.getAccountList2");
          var offsetVar = component.get("v.offset");
          var pageSize = component.find("selectItem").get("v.value");
        console.log(pageSize);
           offsetVar = offsetVar || 0;
        action.setParams({"prev":prevVar, "next" :nextVar, "offs" :offsetVar, "pageSize" :pageSize});
          action.setCallback(this, function(res) {
        var state = res.getState(); 
             if (state === "SUCCESS") {
                 var result = res.getReturnValue();
                component.set("v.hasPrev", result.hasPrev);
                 component.set("v.hasNext", result.hasNext);
                 component.set("v.accountList", result.accList);
                 component.set("v.offset", result.offset);
             }
          });
           $A.enqueueAction(action); 
}

})

============================================================

Server Side Controller : DataTableController

public class DataTableController {    
    @AuraEnabled
    public static AccountWrapper getAccountList2(boolean prev, boolean next, String offs, Integer pageSize) {
        Integer totoalRecords = [select count() from Account];
        Integer offset = Integer.valueOf(offs);
        if(pageSize == null)
               pageSize = 3;
            if(prev && offset>0)
            offset -= pageSize;
            if(next && (offset+pagesize)<=totoalRecords) 
            offset += pageSize;
            System.debug('offset '+offset);
        System.debug('pageSize'+pageSize);
       
        AccountWrapper aw = new AccountWrapper();
        aw.accList = [Select Id, AccountNumber, Name, AccountSource, Industry, Type from Account order by AccountNumber
                       LIMIT :pageSize OFFSET :offset];
        if(offset + pageSize < totoalRecords)
            aw.hasNext = false;
        else
            aw.hasNext = true;
        if(offset > 0)
            aw.hasPrev = false;
        else
            aw.hasPrev = true;
         aw.offset  = String.ValueOf(offset);
        
 
        return aw;    
    }
    public class AccountWrapper{
        @AuraEnabled
        public List<Account> accList;
        @AuraEnabled 
        public boolean hasNext;
        @AuraEnabled 
        public boolean hasPrev;
        @AuraEnabled 
        public String offset;
    }
}
============================================================
This is how it looks :)