Yes mukesh I have already gone through this but in my code it is not working as expected. Let me share my code

component code:- 

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:hasRecordId" access="global"
                controller="fetchAllContacts">
    
    <!-- Attribute Declration For Pagination -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 
    
    <aura:attribute name="contacts" type="Contact[]"/>
    <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 "/>
    <aura:attribute name="range" type="integer" description="range "/>
    <aura:attribute name="recordEnd" type="Integer"/>
    <aura:attribute name="isSelectAll" type="boolean" default="false"/>
    <aura:attribute name="selectedCount" type="integer" default="0"/>
    <aura:attribute name="pageSize" type="Integer"/>

 <!--TABLE HEADER-->
    
    <lightning:card>
        <thead>    
            <tr class="slds-text-title_caps">
                
                
                
                
                &nbsp;   <th>
                
                <label class="slds-checkbox">
                    <ui:inputCheckbox value="{!v.isSelectAll}" change="{!c.handleSelectAllContact}" aura:id="selectAll"/>
                    <span class="slds-checkbox--faux" />
                    <span class="slds-form-element__label"></span>
                </label>
             
                </th>
              
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<th scope="col">
                <div style="font-size: 15px;">
                    
                    <div class="slds-truncate" title="Name">Contacts</div>
                    
                </div>
                </th>
           
            </tr>

        </thead>  
    </lightning:card>

<!--TABLE-->
    
    <div style="height:575px;">
        <div class="slds-scrollable_y " style="height:100%; width:100%;">
            <table aura:id="table" selectedRows="{!v.selection}" class="slds-table slds-table_fixed-layout">
                
                
                
                <tbody>
                    
                    <aura:iteration items="{!v.contacts}" var="item"> 
                        <tr>
                            <lightning:card variant="Narrow"> 
                                <th>
                                    <label class="slds-checkbox">
                                        <ui:inputCheckbox aura:id="singleCB"  value="{!item.isChecked}" text="{!item.objContact.Id}" change="{!c.checkboxSelect}"  />
                                        <span class="slds-checkbox--faux" />
                                        <span class="slds-form-element__label"></span>
                                    </label>
                                </th>
                                
                                
                                
                                <td>
                                    
                                    <a target="_blank" href="{!'/'+item.objContact.Id}"><div style="height:180px; width:180px;"><aura:unescapedHtml value="{!item.objContact.Profile_Pic__c}" /></div></a>
                                    
                                </td>
                                
                                
                                <th>
                                    <div style="font-size: 17px;">
                                        <div class="slds-truncate" title="{!item.objContact.Name}">
                                            Name: <a href="{!'/'+item.objContact.Id}">{!item.objContact.Name}</a>
                                        </div>
                                        <div class="slds-truncate" title="{!item.objContact.Account.Name}">
                                            Account Name: <a href="{!'/'+item.objContact.AccountId}">{!item.objContact.Account.Name}</a>
                                        </div>
                                        <div class="slds-truncate" title="{!item.objContact.Title}">Title: {!item.objContact.Title}</div>
                                    </div>
                                </th>
                            </lightning:card>    
                        </tr>
                        
                        <!--  <ui:outputRichText value="{!item.Profile_Pic__c}"/>-->
                    </aura:iteration>
                    
                    
                </tbody>
            </table>
        </div>
    </div>
    
    <!--FOOTER-->

<lightning:card>
        
        <aura:set attribute="footer">
            <lightning:layout horizontalAlign="spread"> 
                
                <lightning:layoutItem  >
                    <span class="slds-badge slds-badge_lightest">
                        <p class="slds-truncate">{!v.range}-{!v.recordEnd} of {!v.total} Contacts &nbsp; </p>
                    </span>
                </lightning:layoutItem>
                <lightning:layoutItem  >
                    
                    <div class="slds-p-left_xx-small">
                        
                        <ui:inputSelect aura:id="recordSize" label="Show Records " change="{!c.onSelectChange}">
                            <ui:inputSelectOption text="5" label="5" value="true"/>
                            <ui:inputSelectOption text="10" label="10"/>
                            <ui:inputSelectOption text="20" label="20"/>
                            <ui:inputSelectOption text="50" label="50"/>
                        </ui:inputSelect>
                    </div>
                </lightning:layoutItem>
                
                
                <lightning:layoutItem>
                    <div class="slds-p-right_xx-small">
                        <lightning:button disabled="{!v.page == 1}" variant="brand" label="Previous Page" onclick="{! c.navigate }" />            
                        <lightning:button disabled="{!v.page == v.pages}" aura:id="previousPage" variant="brand" label="Next Page" onclick="{! c.navigate }" />
                    </div>
                </lightning:layoutItem>
                
                
                <lightning:layoutItem  >
                    <span class="slds-badge slds-badge_lightest">
                        <p>Page {!v.page} of {!v.pages}</p></span>
                </lightning:layoutItem>                    
  
                
            </lightning:layout>
        </aura:set>

    </lightning:card> 
        
    <br/>
    
    
     display total record and selected record count    
            <p class="slds-m-around_small">
                <span class="slds-badge slds-badge_lightest" style="display:inline-block">
                    Total Records : {!v.selectedCount > 0 ? v.selectedCount + '/' : ''} {!v.total} 
                </span>
            </p>
    
</aura:component>

js code:-

({
    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
        //console.log('error'+page);
        
        var page = component.get("v.page") || 1;
                console.log('error'+page);

        // get the select option (drop-down) values.   
        var recordToDisply = component.find("recordSize").get("v.value");
                console.log('error'+recordToDisply);

        // call the helper function   
        helper.getContacts(component, page, recordToDisply);
        
    },
    
    //Select all contacts
    handleSelectAllContact: function(component, event, helper) {
        var checkAllList = [];
        var listOfContacts = component.get("v.contacts");
        //var checkvalue = component.find("selectAll").get("v.value"); 
        var selectedHeaderCheck = event.getSource().get("v.value");       
       // var checkContact = component.find("checkContact"); 
        //if(checkvalue == true){
            for(var i=0; i<listOfContacts.length; i++){
                if(selectedHeaderCheck == true){
                    listOfContacts[i].isChecked = true;
                //checkContact[i].set("v.value",true);    
                component.set("v.selectedCount", listOfContacts.length);
            }
            
        else{ 
                listOfContacts[i].isChecked = false;
                //checkContact[i].set("v.value",false);
                component.set("v.selectedCount", 0);  
            }
                checkAllList.push(listOfContacts[i]);
        }
        
        
        component.set("v.contacts", checkAllList);
    },
     
    checkboxSelect: function(component, event, helper) {
       // var selectedCheckList = [];
        //console.log('l'+selectedCheckList);
        //var checkLength = component.find("checkContact");
        var selectedRec = event.getSource().get("v.value");
       // var checkContact = event.getSource().get("v.value");
        //console.log('checkContactlelo'+checkContact);
        var getSelectedNumber = component.get("v.selectedCount");
        console.log('n'+getSelectedNumber);
       
        if(selectedRec == true){
                getSelectedNumber++;
           // selectedCheckList.push(checkContact);
          //  console.log('checkContact'+checkContact.get("v.value"));
        } else {
            getSelectedNumber--;
           // selectedCheckList.pop(checkContact);
            component.find("selectAll").set("v.value", false);
            
        }
     
  
        component.set("v.selectedCount", getSelectedNumber);
        // if all checkboxes are checked then set header checkbox with true   
        if (getSelectedNumber == component.get("v.pageSize")) {
            component.find("selectAll").set("v.value", true);
        }
        
    },

    
    
    navigate: 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.getContacts(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.getContacts(component, page, recordToDisply);
    },
    
})

helper js:

({
   getContacts: function(component, page, recordToDisply) {
      // create a server side action. 
      
      var action = component.get("c.fetchContact");
      // 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.contacts", result.contacts);
         component.set("v.page", result.page);
         component.set("v.total", result.total);
         component.set("v.pages", Math.ceil(result.total / recordToDisply));
          component.set("v.range", result.range);
          component.set("v.recordEnd", result.recordEnd);
           component.set("v.selectedCount" , 0);
          component.set("v.pageSize", result.pageSize);
         //  component.set("v.isChecked", result.isChecked);
            //component.set("v.isSelectAll", false); 
      });
      // enqueue the action 
      $A.enqueueAction(action);
   }
})

apex class controller:

public with sharing class fetchAllContacts {
    
    @AuraEnabled    
    public static ContactPagerWrapper fetchContact(Decimal pageNumber ,Integer recordToDisply) {
        List<ContactPagerWrapper> modifiedList = new List<ContactPagerWrapper>();
        Integer pageSize = recordToDisply;
        Integer offset = ((Integer)pageNumber - 1) * pageSize;
       // boolean isChecked = true; 
        Integer page = (Integer) pageNumber;
        Integer recordEnd = pageSize * page;
        Integer total = [SELECT count() FROM Contact];
        // create a instance of wrapper class.
        ContactPagerWrapper obj =  new ContactPagerWrapper();
        // set the pageSize,Page(Number), total records and accounts List(using OFFSET)   
        obj.pageSize = pageSize;
        obj.page = page;
        obj.total = total;
        for(Contact c:[SELECT Name,Display_Pic__c,Profile_Pic__c, Account.Name, Title FROM Contact ORDER BY Name LIMIT :recordToDisply OFFSET :offset]){
            modifiedList.add(new ContactPagerWrapper(false,c));
        }
        
        obj.contacts = modifiedList;
        obj.range = offset+1;
        obj.recordEnd = total >= recordEnd ? recordEnd : total;
        //obj.isChecked = isChecked;
        // return the wrapper class instance .
        return obj;
    }
    
    // create a wrapper class with @AuraEnabled Properties    
    public class ContactPagerWrapper {
        //@AuraEnabled public boolean isChecked {get;set;}
        @AuraEnabled public Integer pageSize {get;set;}
        @AuraEnabled public Integer page {get;set;}
        @AuraEnabled public Integer total {get;set;}
        @AuraEnabled public Integer range {get;set;}
        @AuraEnabled public Integer recordEnd {get;set;}
        @AuraEnabled public List<ContactPagerWrapper> contacts {get;set;}
        @AuraEnabled public boolean isChecked {get;set;}
        @AuraEnabled public Contact objContact{get;set;}
        public ContactPagerWrapper(boolean isChecked, Contact objContact){
            this.isChecked = isChecked;
            this.objContact = objContact;
        }
        public ContactPagerWrapper(){
            
        }
        
    }
}


I know the code is very long. but Plzz help me..