How to implement client side pagination in LWC ?

In this article, we are going to see how to implement client side pagination in LWC. Let say you have got requirement to get contacts from apex controller and display it in a table. But the catch here is there are 100s of records and now you have got the task to implement pagination such that you can also control how many records can be shown in the table from component only. So let's begin

1.Let's say we have got apex controller as below :
@AuraEnabled(cacheable=true)
public static List getMContact(String uId){
List cList = new List();
system.debug('The user Id is '+uId);
User ug = [Select Id,Contact.AccountId from User WHERE Id =: uId LIMIT 1];
if(ug != null){
cList = [Select Id,Name,Phone,BirthDate,Email,MobilePhone,Role__c,is_Active__c from Contact WHERE AccountId =: ug.Contact.AccountId];
}
system.debug('the count is '+cList.size());
return cList;
}



2. Now we will create an LWC component for that as shown below :
<template for:each={recordsToDisplay} for:item="contact">      
        <div  key={contact.Id} onclick={showRow} data-contact-id={contact.Id}>
            <template if:true={contact.showAdditionalData} >
            <img src={arrowUp} onclick={showRow} data-contact-id={contact.Id} />
            </template>
            <template if:false={contact.showAdditionalData}>
                <img src={arrowDown} onclick={showRow} data-contact-id={contact.Id} />
            </template>   
        <p >{contact.Name}</p>
        <a > <img src={emailLogo} />{contact.Email}</a>
        <button if:true={contact.is_Active__c} >Active</button>
        <button if:false={contact.is_Active__c} >Inactive</button>
        <p  data-contact-id={contact.Id} onclick={handleEditForm}> 
         <img  src={editLogo} />Edit</p>
        </div>




<div>
    <div ><p>Items per page : </p>
                            <select class="slds-select " id="recordsPerPage" onchange= 
                              {handleRecordsPerPage}>
                            <template for:each={pageSizeOptions} for:item="option">
                            <option key={option} value={option}>{option}</option>
                            </template>
                            </select>
    </div>
    <p >{pageL} - {pageU} of {totalNumberofRecords} items</p>
    <p >
            <select  class="slds-select " id="PageNumber" onchange={handlePageNumber}>
            <template  for:each={pageNumberOptions} for:item="option">
            <option  key={option} value={option} >{option}</option>
            </template>
            </select>
        of {totalPages} pages</p>
    <p  onclick={previousPage}>
     <img src={arrowUp} /></p>
    <p  onclick={nextPage}><img src={arrowDown}/></p>
    </div>
</template>  


3. Now we will look for the JS code of the component : 
  import getMContacts from '@salesforce/apex/administrationMP.getMContact';
export default class SalesPersonDatatableMP extends LightningElement {
    @api arrowUp;
    @api arrowDown;
    @api currentArrow;
    @api cData;
    @api nData;
    @api tData;
    @api error;
    @api pageL;
    @api pageU;
    @api numberOfRecords = 5;
    @api totalNumberOfRecords;
    @api totalPages;
    @api recordsDisplaying;
    @api recordsToDisplay = [];
    @api pageSizeOptions = [5, 10, 25, 50, 75, 100];
    @api pageNumberOptions = [];
    @api pageNumber;
    @api showForm = false;

      connectedCallback(){
        this.getData();
    }
     //Fetching data to be displayed from Apex
     getData(){
        getMContacts({uId : this.userId})
        .then(result =>{
            this.totalNumberofRecords = result.length;
            this.cData = result.map(contact => ({
                ...contact,
                showAdditionalData: false
            }));
           this.nData = this.cData;
           this.pageNumber = 1;
           this.totalPages = Math.ceil(this.totalNumberofRecords / this.numberOfRecords);
          this.paginationHelper();
        })
        .catch(error =>{
            console.log('The error is '+JSON.stringify(error));
        })
    }
    //This is to set the number of records to be displayed on page
    handleRecordsPerPage(event) {
        this.numberOfRecords = event.target.value;
        this.getData();
    }

    //Previous page selection
    previousPage() {
        this.pageNumber = this.pageNumber - 1;
        console.log('the pageNumber is '+this.pageNumber)
        this.paginationHelper();
       
    }

    //Next page selection
    nextPage() {
        this.pageNumber = this.pageNumber + 1;
        console.log('the pageNumber is '+this.pageNumber)
        this.paginationHelper();
    }
   

    //This method is used to set the records being displayed in case of any event such as next page, previous page etc
    paginationHelper(){
      this.recordsToDisplay = [];
      this.pageNumberOptions = [];
     
      for(let j = 1; j <= this.totalPages ; j++){
        this.pageNumberOptions.push(j);   //
      }

   
      if (this.pageNumber <= 1) {
        this.pageNumber = 1;
       } else if (this.pageNumber >= this.totalPages) {
        this.pageNumber = this.totalPages;
      }
 
     
      this.pageL = ((this.pageNumber-1) * this.numberOfRecords)+1;
      this.pageU =  this.pageNumber * this.numberOfRecords;
     

      for (let i = (this.pageNumber - 1) * this.numberOfRecords; i < this.pageNumber * this.numberOfRecords; i++) {
        if (i ===   this.totalNumberofRecords ) {
            break;
        }
        this.recordsToDisplay.push(this.cData[i]);
      }
    }


}


4. The output will look like the image below :




5. For any queries you can comment and we can discuss and resolve it .

Comments

Post a Comment

Popular posts from this blog

How to create Connected App in Salesforce and get access Token?

Image
  The Connected App is created to make authenticated calls to REST API in salesforce to perform CRUD (Create, Read, Update and Delete ) operations on records in Salesforce. To create a connected app follow the steps below : Go to App Manager in Setup and click on New Connected App 2. Fill out all the details as shown below with valid mail Id. In callback URL, you can enter any URL where you want to redirect after successful result. OAuth Scope has been provided as Full Access. You can modify it according to your requirement. Then save it. 3. Then on the Connected App record that we have created, click on Manage > Edit Policies > Permitted Users. Set it to All users may self-authorize. Also if you have got some IP ranges set in your org, you can set IP Restriction to Relax IP restriction. 4. Then in Setup go to My Domain and note down the domain name. 5. Then we will go back to Connected App record that we had created and note down the client_id and client_secret from there which
Read more

Update Custom Fonts in Salesforce Experience/Community Site

Image
So we are going to see how we can update the custom fonts on Salesforce Experience Site. If we want to change the fonts, we have a set of fonts that are available in the community site that we can choose from. But in case if we want to get a new font style we can follow the process.   1. Download the .ttf file of the font that you want in your experience site.   2. Upload the file in the Static Resource. 3.   Then go to Setup > All Sites > Builder (of site in which font is to be added). 4.   Then select Themes as shown in the image below. 5.  Select the drop-down and the click on Edit CSS as shown below. 6.  Here enter the code as metioned below. 7.  Font-family is the alias name given to the font with the help of which we will select the custom font later. Then in the src :  url(‘/sfsites/c/resource/  will be as it. Then we will enter the name of static resource which we had created earlier and in the end we will enter our filename. 8.  This will be followed by  format(‘truetyp
Read more

Error Logging Framework in Salesforce

Image
In Salesforce, to check for the errors, we do use debug logs. But the issue arises because we don't have access to logs when there is error in production. Many of the errors are even hard to replicate in production. Also the standard debug log hits the storage limit in production. Also if we delete some logs, it might delete those logs which would have been important to others. So here we are going to see a way to store the errors in SFDC so that users at any point of time in future can see and work upon them, without facing any of the issues mentioned above. So to start with we will create a custom object named : Log__c Then we will create the following custom fields of this object : 1. Log_Number__c : Auto Number 2. Exception_Cause__c : Long Text Area 3. Exception_Message__c : Long Text Area 4. Exception_Type__c : Text 5. Line_Number__c : Number 6. Stack_Trace__c : Long Text Area 7. Execution_Context__c : Text Then create custom Metadata i
Read more