+ Start a Discussion
pranav shah 40pranav shah 40 

Pagination for data table

Dear Team,  Could anyone please help with pagination, i am just getting 1st 10 records in pagination when i debug it. but i am able to move 70 records by moving to next page...till every page... For ex: i have 76 records , so it moves 7 page with 70 records but when i click to  next button to move to last 6 records ir displays previous 10 records on page...


Below is my code
Component Class
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordID,lightning:isUrlAddressable" 
                controller="LTI_CodeCoverageHelper">
    <ltng:require styles="{!$Resource.CMTStylesheet + '/stylesheet.css'}" />


    <aura:attribute name="data" type="List"/>
    <aura:attribute name="originaldata" type="List"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="searchText" type="String" description="use for store user search input"/> 
    <aura:attribute name="TotalClasses" type="Integer" description="use for displaying the class count"/>
    <!--aura:attribute name="dataList" type="List"/-->
    
    
    <!-- Start of Pagination attributes-->
    <aura:attribute name="conStart" type="Integer" />    
    <aura:attribute name="conEnd" type="Integer"/>    
    <aura:attribute name="conPageNumber" type="Integer"/>
    <aura:attribute name="pageSize" type="Integer" default="10"/>    
    <aura:attribute name="totalSize" type="Integer"/>
    <aura:attribute name="paginationList" type="List"/>
    <!-- End of Pagination attributes -->

    
    
    <!-- handlers-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit }"/>
    <!--aura:handler event='force:refreshView' action='{!c.doInit}' /-->
        <aura:attribute name="showSpinner" type="Boolean" default="false" />
      
  

    
  

    
   <div class="CMTslds-grid CMTslds-wrap CMT_Gridlayout" style="    margin: 15px;  border-radius: 5px;
    background: white;
   ">
         <div class="CMTslds-grid CMTTitle" style="width:100%;">
            <div class="CMTslds-col CMT_TabHeading CMTTitle">
       <span>Code Coverage Check</span> 
        </div>
           <div class="CMTslds-col" >
      <lightning:button variant="brand" label="Back to Home" title="Back to Home" onclick="{! c.Backtohome }" class="BTOHbutton" />
      <lightning:button name="downloadCsv" label="Download CSV" onclick="{!c.downloadCSV}"  title="Download CSV" variant="brand" class="BTOHbutton"/>
         </div>
         </div>
       
         

   

<div class="slds-col slds-size_3-of-12 CMT_Innersec">
<span>
   <aura:if isTrue="{!v.showSpinner}"> 
    <lightning:input value="{!v.searchText}"
                             required="false"
                             placeholder="Enter the Class Name"
                             aura:id="searchText"
                             label="Looking for a Specific Class? "
                             onchange="{!c.keyCheck}"
                             class="CMT_Inputlab"/>
          <aura:set attribute="else">
                <lightning:spinner alternativeText="Loading" />
            </aura:set>
    </aura:if>
      
    </span>
</div>
<div class="slds-col slds-size_5-of-12 CMT_Innersec">
<span><div class="LegendSec">
            <div >⛔ No Coverage</div>
            <div>⚠️ Need Coverage Analysis</div>
            <div>✅ Good Coverage</div>
            </div></span>
</div>
<div class="slds-col slds-size_12-of-12 CMT_Innertable">
<span><lightning:datatable
                             keyField="id"
                             columns="{!v.columns}"
                             data="{!v.paginationList}"
                             hideCheckboxColumn="true"      
                                 class="CMTTable_style"
                             /></span>
</div>
      
</div>
    
    
  <!--Start of Pagination Buttons>-->
        <div class="slds-clearfix">
            <div class="slds-page-header custom-page-header" role="banner">
                <div class="slds-float_right">            
                    <lightning:button label="First" disabled="{!v.conStart == 0}"  onclick="{!c.first}" class="firstButton"/>            
                    <lightning:button label="Previous" disabled="{!v.conStart == 0}"  onclick="{!c.previous}" class="previousButton"/>      
                    <lightning:button label="Next" disabled="{!v.conEnd >= v.totalSize}" onclick="{!c.next}" class="nextButton"/>            
                    <lightning:button label="Last" disabled="{!v.conEnd >= v.totalSize}" onclick="{!c.last}" class="lastButton"/>
                    <p class="slds-page-header__title">{!v.conStart+1}-{!v.conEnd+1} of {!v.totalSize} | Page {!v.conPageNumber}</p>
                </div>
            </div>
</div>
<aura:component>

Controller:
({
    doInit : function(component,event) {
        component.set("v.showSpinner", false);
        debugger;
        component.set('v.columns', [
            {label: 'Class Name', fieldName: 'classOrTriggerName', type: 'text'},
            {label: 'Coverage', fieldName: 'coveragePercentage', type: 'text'},
            {label: 'Status', fieldName: 'Status', type: 'text'},
        ]);
            
            var action = component.get("c.getCodeCoverage"); 
            action.setCallback(this, function(response) {
            
            debugger;
            
            var state = response.getState();
            // alert(state);
            console.log(response.getReturnValue());
            var storeresponse = JSON.parse(response.getReturnValue());            

            if(state==="SUCCESS"){
            var pageSize = component.get("v.pageSize");
            component.set("v.data",storeresponse.CoverageList);
            component.set("v.originaldata",storeresponse.CoverageList);
                        component.set("v.showSpinner", true);

            
            //Code for intializing pagination list
            
            //var pageSize = component.get("v.pageSize");
            component.set("v.totalSize", component.get("v.data").length);                                       
            component.set("v.conStart",0);                                 
            component.set("v.conEnd",pageSize-1);
            component.set("v.conPageNumber",1);
            var paginationList = [];     
                      
            for(var i=0; i< pageSize; i++)                                           
            {                        
            if (component.get("v.data").length>i )    
            paginationList.push(storeresponse.CoverageList[i]);                                           
            }                                       
            component.set("v.paginationList", paginationList);                                       
            console.log('@@Pagination list'+JSON.stringify(paginationList));
            component.set("v.showSpinner", true);

           
                        
            }
            else
            {
            var errors = response.getError();
            }
            
            });
            
            $A.enqueueAction(action);
            },
 
    keyCheck : function(component,event,helper){
           
            debugger;
            var searchText =component.get("v.searchText").toLowerCase();           
            var orgdata = component.get('v.originaldata'); 
            var dataOnly = orgdata.filter(function (entry) {
            return entry.classOrTriggerName.toLowerCase().startsWith(searchText);
            });
            component.set("v.data",dataOnly);
          
                        
    },
            
            
//Start of Pagination methods
    first : function(component, event, helper)    
    {    
        var consumptionDetails = component.get("v.data");
        var pageSize = component.get("v.pageSize");
        var paginationList = [];
        var dataList;
        var start;
        var end;
        

        dataList = component.get("v.data"); 

        for(var i=0; i< pageSize; i++)
        {   
            paginationList.push(dataList[i]);            
        } 

        component.set("v.conStart",0);
        component.set("v.conEnd",pageSize-1);
        component.set("v.conPageNumber",1);            
    
        component.set("v.paginationList", paginationList);         
        console.log('@ First Button list'+component.get("v.paginationList"));        
    },
    
    next : function(component, event, helper)    
    {    

        var dataList;
        var start;
        var end;
        
        dataList = component.get("v.data");
        start = component.get("v.conStart");
        end = component.get("v.conEnd"); 
        
        component.set("v.totalSize", dataList.length);
        
        var pageSize = component.get("v.pageSize");
        var totalRecords = component.get("v.totalSize");
        
        var paginationList = [];        
        var counter = 0;
        
        for(var i=end+1; i<end+pageSize+1; i++)            
        {            
            if(dataList.length > end)                
            {                
                paginationList.push(dataList[i]);                
                counter ++ ;                
            }
            
        }
        
        start = start + counter;
           end = end + counter;
        
        component.set("v.conStart",start);
        component.set("v.conEnd",end);
        component.set("v.conPageNumber",component.get("v.conPageNumber")+1);              
        
        component.set("v.paginationList", paginationList);        
          
    },
    
    previous : function(component, event, helper)    
    {   
              
        var dataList;
        var start;
        var end;

        dataList = component.get("v.data");
        start = component.get("v.conStart");
        end = component.get("v.conEnd"); 
                    
        var pageSize = component.get("v.pageSize");        
        var paginationList = [];
        
        var counter = 0;
        
        for(var i= start-pageSize; i < start ; i++)            
        {            
            if(i > -1)                
            {                
                paginationList.push(dataList[i]);               
                counter ++;                
            }            
            else {                
                start++;                
            }            
        }        
        start = start - counter;       
        end = end - counter;
        
        component.set("v.conStart",start);
        component.set("v.conEnd",end);
        component.set("v.conPageNumber",component.get("v.conPageNumber")-1);            
 
        component.set("v.paginationList", paginationList);        
    },
    
    last : function(component, event, helper)
    {
        var conList = component.get("v.data");
        var pageSize = component.get("v.pageSize");
        var totalSize = component.get("v.totalSize");
        
        var totalpages = parseInt(totalSize/pageSize);
        var lastpagecounter = (totalpages*pageSize);
        console.log('@@ Total Pages-->'+totalpages);
        console.log('@@ Total Size-->'+totalSize);       
        console.log('@@ Last Page Starts from-->'+lastpagecounter);

        var paginationList = [];
        for(var i=lastpagecounter; i< totalSize; i++)
        {
            paginationList.push(conList[i]);
        }
        component.set("v.conStart",lastpagecounter);
        component.set("v.conEnd",totalSize-1);
        component.set("v.conPageNumber",totalpages+1);
        component.set('v.paginationList', paginationList);
    },
    //End of Pagination methods
            
            
            
            
            
   Backtohome : function(component, event, helper) {
        var evt = $A.get("e.force:navigateToComponent");
        evt.setParams({
            componentDef : "LTI:LTI_Metadatahomepage",        
        });
     evt.fire();
    },
      downloadCSV : function(component, event, helper){
       // var tableData = component.get("v.originaldata");
      // var tableData = component.get("v.ApexCodeCoverage");
          var tableData = component.get("v.data");
            console.log("tableData>"+JSON.stringify(tableData));
          var csv = helper.convertArrayOfObjectsToCSV(component,tableData); 
               console.log("csv>"+JSON.stringify(csv));
        
        if (csv == null){return;}
            // ####--code for create a temp. <a> html tag [link tag] for download the CSV file--####    
         var hiddenElement = document.createElement('a');
          hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
          hiddenElement.target = '_self'; //
          hiddenElement.download = 'ExportData.csv';  // CSV file Name* you can change it.[only name not .csv]
          document.body.appendChild(hiddenElement); // Required for FireFox browser
          hiddenElement.click(); // using click() js function to download csv file
        }         
   
       
        })
 
ANUTEJANUTEJ (Salesforce Developers) 
Hi Pranav,

You can try checking the below link that seems to have a similar implementation.

>> https://www.mstsolutions.com/technical/pagination-using-lightning-components/

I hope this helps.

Regards,
Anutej