Hi Magulan,
Thanks for your replay,

For pagenation you are provided link is ok,but my main requirement is i need to populate the checkboxes beside the records when my data table is loaded and need to sort the records when i clicked on header labels.I need to check only one check box at a time. I have four images above my table. After i checked my check box i need to click on any one image. Then it navigate to another compoent with checked record's record Id. If i use the auara:Iteration tag at that time i am not able to get the checkboxes but if i use the lightning:datatable tag i can able to get the check boxes. I need to validate that check boxes for check only one at a time. and by clicking on any one of my images it should navigate to another compoent.

 I was taken reference from the URL Link : http://sfdcmonkey.com/2017/01/26/display-record-with-pager-buttons-lightning-component/
But above link aura:iteration is implemented but i changed it in my component as lighting:datatable

So please kindly help me on this.This is very imaportant requirement to me.
                                                           Thanks in advance
Thanks
Venkat.

My Refence code is 

Component:


<aura:component controller="DataTableWithPagenation">
    <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 "/>
    <aura:attribute name="mycolumns" type="List"/>
    
    <div class="slds-m-around_small">
        <div class="slds-page-header" role="banner">
            
            <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>
        
         <p class="slds-p-horizontal_small slds-box">
            <lightning:datatable data="{!v.Accounts}" columns="{! v.mycolumns }" keyField="id"  />
        </p>
        <div class="slds-align_absolute-center">            
                <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>
        
       <!-- <table class="slds-table slds-table_bordered slds-table_cell-buffer">
            <thead>
                <tr class="slds-text-title_caps">
                    <th scope="col">
                        <div class="slds-truncate" title="Name">Account Name</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.Accounts}" var="account"> 
                    <tr>
                        <th scope="row" data-label="Opportunity Name">
                            <div class="slds-truncate" title="{!account.Name}">{!account.Name}</div>
                        </th>
                    </tr>
                </aura:iteration>    
            </tbody>
        </table>-->
        
        
        
    </div>
</aura:component>
===============================================================
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");
      
       component.set('v.mycolumns', [
                   {label: 'Account Name', fieldName: 'Name', type: 'Name',sortable:'true'},                   
                {label: 'Phone', fieldName: 'Phone', type: 'Phone',sortable:'true'},
                {label: 'Email ID', fieldName: 'Email_ID__c', type: 'Email',sortable:'true'}
            ]);
      
      // call the helper function   
      helper.getAccounts(component, page, recordToDisply);
 
   },
 
   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.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);
   },
 
})
 
===============================================================================
helper.js


 ({
   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);
   }
})
===================================================
Apex controller:


public   with sharing class DataTableWithPagenation {

   @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,Email_ID__c 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;}
   }
}
=====================================================================================
Refence Image: