How to Create Sinlge show Record Using Pagination on Lightning Component

hello frnds today i'm going post how to show sinlge record usong Pagination

Step=>1. Create Lightning Component
                go to developer Console=>File=>New=>Lightning Component

            casePage.cmp


              <aura:component controller="listViewController" implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="CaseData" type="Case[]"/>
    <aura:attribute name="offset" type="integer" />
    <aura:attribute name="next" type="boolean" />
    <aura:attribute name="prev" type="boolean" />
    
    <div style="border:medium solid; black;margin:10px 10px 10px 10px;height:600px;">
        <div class="slds-col">
            <strong> <h1 style="font-size:25px;margin-left:10px;color:#DE600B;"> Product Release Timeline</h1></strong>
            <div class="slds-border_top" style="margin-left:10px;margin-right:10px;"></div>
            <div style="margin-top:5px;margin-left:10px;margin-right:15px;">
                <span style="font-size:22px;fony-family:Sans-serif,Monospace;">The Product Release Timeline allows you to view the upcoming release schedules 
                    for Baker Hill solutions. Additionally, you can see release that have been delivered during the past 12 months.
                    If documentation is available for a given release, a link is shown in the Release Document field.
                    Future release dates are tentative. Product Management will confirm release dates with a formal
                    announcement prior to the release.
                </span></div>
        </div>
        
        <div class="slds-box" style="margin-top:5px;margin-left:10px;margin-right:10px;height:400px;">
            <div class="slds-grid">
                <div class="" style="width:300px;height:380px;">
                    <div><img src="{!$Resource.left}" onclick="{!c.OnPrevious}" style="width:30px;margin-top:150px;cursor:pointer;" /></div>
                    <aura:iteration items="{!v.CaseData}" var="cdate">
                        <div style="font-size:30px; width:150px;margin-top:15px;">{!cdate.cDate__c}</div>
                    </aura:iteration>
                </div>
                <div class="" style="width:600px;margin-left:5px;height:382px;line-height:22px;">
                    <aura:iteration items="{!v.CaseData}" var="cases">
                        <div style="font-size:22px;"> <h3>{!cases.cDate__c}</h3></div><br/>
                        <h2 style="font-size:22px;color:#DE600B;">Case Title-{!cases.Subject}</h2><br/>
                        <span style="font-size:20px;"><b> Case Description:</b></span><br/>
                        <span style="font-size:17px;"> This quartely release of Origination, with general availability of {!cases.cDate__c}
                            includes feature updates of some smaller changes to HMDA labels and dropdown 
                            lists for 2019 data collection, and performance improvements for CSV download.
                            Technical updates include a couple items of added functionality, and changes to 
                            improve CSi integration A few errors were also corrected. These updates are outlined
                            in the related Changes document.
                        </span><br/>
                        <span><b>Case Origin:</b> {!cases.Origin}</span><br/>
                        <span><b>Case Type:</b> {!cases.Type}</span><br/>
                        <span><b>Case Owner:</b> {!cases.Owner.FirstName}&nbsp;{!cases.Owner.LastName}</span><br/>
                        
                    </aura:iteration>
                </div>
                <div class="" style="margin-left:5px; width:360px;height:380px;">
                    <div><img src="{!$Resource.right}" onclick="{!c.OnNext}" style="width:50px;margin-top:150px;cursor:pointer;margin-left:290px;" /></div>
                    <aura:iteration items="{!v.CaseData}" var="cdate">
                        <div style="font-size:30px; width:150px;margin-left:230px;">{!cdate.cDate__c}</div>
                    </aura:iteration>
                </div>
            </div>
            
        </div>
        
    </div>
    
</aura:component>

Step=>2.

casePageController.js


       ({
    doInit : function(component, event, helper) {
        var next = false;
        var prev = false;
        helper.getCaseList(component,next,prev);
    },
    
    OnNext:function(component,event,helper)
    {
        var next = true;
        var prev = false;
        var offset = component.get("v.offset");
        helper.getCaseList(component,next,prev,offset);
    },
    OnPrevious:function(component,event,helper)
    {
        var next = false;
        var prev = true;
        var offset = component.get("v.offset");
        helper.getCaseList(component,next,prev,offset);
    }
    
})


Step=>3.
      
      casePageHelper.js


      ({
    getCaseList: function(component,next,prev,offset) {
        offset = offset || 0;
        var action = component.get("c.getCase");
        action.setParams({
            "next" : next,
            "prev" : prev,
            "off" : offset
        })
        var self = this;
        action.setCallback(this, function(actionResult) {
            var result=actionResult.getReturnValue(); 
            component.set('v.offset',result.offst);
            component.set('v.next',result.hasnext);
            component.set('v.prev',result.hasprev);
            component.set('v.CaseData', result.lst);
        });
        $A.enqueueAction(action);
    }
})



Step=>4.

Create a Apex Class for fetch data

    goto file=>new=>Apex Class

               public class listViewController {
    @AuraEnabled
    public integer offst;
 
    @AuraEnabled
    public integer total;
 
    @AuraEnabled
    public boolean hasprev;
 
    @AuraEnabled
    public boolean hasnext;
 
    @AuraEnabled
    public List<Case> lst;
    private static integer pagesize=1;
    private static integer offset;
    @AuraEnabled
    public static listViewController getCase(boolean next,boolean prev,decimal off)
    {
        offset = (integer)off;
        listViewController pg = new listViewController();
        List<Case> lst;
        integer iRecordCount=Database.countQuery('Select Count() FROM Case');
        if(next==false && prev==false){
         
        }else if(next==true && (offset+pagesize)<=iRecordCount){
            offset=offset+pagesize;
         
         
        }else if(prev==true && offset>0){
            offset=offset-pagesize;
         
        }
        lst=[SELECT Id,Type,Owner.FirstName,Owner.LastName,CreatedDate,Description,Origin,Subject,cDate__c FROM Case LIMIT :pagesize OFFSET :offset];
        pg.lst = lst;
        pg.offst = offset;
        pg.hasprev = hasprev(offset);
        pg.hasnext = hasnxt(offset,iRecordCount,pagesize);pg.total=iRecordCount;
     
        Datetime dt=lst[0].CreatedDate;
        String myDate = dt.format('MMM dd, yyyy');
        integer i=0;
        for(i=0;i<lst.size();i++){
            lst[i].cDate__c=myDate;
        }
     
        return pg;
    }
    private static boolean hasprev(integer off){
        if(off>0)
            return false;
        return true;}
    private static boolean hasnxt(integer off,integer li,integer ps){
        if(off+ps<li)
            return false;
        return true;}
}

                                                        Output:

                                           




Note: In Product Releas Timeline  & case description Text is Hard codded text  you will change According to your requirement..

Thanks..!

         

Buy me a coffee