How to create custom dynamic pagination in custom table using apex class method in Lightning Web Component (LWC)

[vijayk3327]

In this post we are going to learn about How to create custom dynamic pagination in custom table using apex class method in Lightning Web Component (lwc).

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component : contactPaginationLwc.html

`

<template if:true={loaderSpinner}>
    <lightning-spinner variant="brand" alternative-text="Loading..." size="medium"></lightning-spinner>
</template>

<div class="slds-box slds-theme_default">
    <lightning-card  title="Contacts">
        <table class="slds-table slds-table_cell-buffer slds-table_bordered">
            <thead>
                <tr class="slds-line-height_reset slds-text-title_caps">
                    <th  class="slds-is-resizable" scope="col">
                        <div class="slds-truncate" title="Name">
                            Name
                        </div>
                    </th>
                    <th  class="slds-is-resizable" scope="col">
                        <div class="slds-truncate" title="First Name">
                           First Name
                        </div>
                    </th>
                    <th  class="slds-is-resizable" scope="col">
                        <div class="slds-truncate" title="Email">
                            Email
                        </div>
                    </th>
                    <th class="slds-is-resizable" scope="col">
                        <div class="slds-truncate" title="Phone">
                            Phone
                        </div>
                    </th>
                    <th class="slds-is-resizable" scope="col">
                        <div class="slds-truncate" title="Phone">
                            Title
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <template if:true={contacts}>
                    <template for:each={contacts} for:item="conItem">
                        <tr key={conItem.Id}>
                            <th scope="row" data-label="Name">
                                <div class="slds-truncate" title={conItem.Name}>{conItem.Name}</div>
                            </th>
                            <th scope="row" data-label="Account Number">
                                <div class="slds-truncate" title={conItem.FirstName}>{conItem.FirstName}</div>
                            </th>
                            <th scope="row" data-label="Industry">
                                <div class="slds-truncate" title={conItem.LastName}>{conItem.LastName}</div>
                            </th>
                            <th scope="row" data-label="Phone">
                                <template if:true={conItem.Phone}>
                                <div class="slds-truncate" title={conItem.Phone}>{conItem.Phone}</div>
                            </template>
                            </th>
                            <th scope="row" data-label="Title">
                                <template if:true={conItem.Title}>
                                <div class="slds-truncate" title={conItem.Title}>{conItem.Phone}</div>
                            </template>
                            </th>
                        </tr>
                    </template>
                </template>
            </tbody>
        </table>
        <template if:true={isDisplayNoRecords}>
            <div class="slds-align_absolute-center">
                <br/>
                No records found
            </div>
        </template>
        <br/>
        <div class="slds-align_absolute-center"> 
            <div class="slds-p-right_xx-small">
                     
                <lightning-button label="Prev"
                disabled={isPrev} onclick={handlePagePrevAction}
                                    variant="brand"
                                    icon-name="utility:back"
                                    name="prev"></lightning-button>  
            </div>
            <span class="slds-badge slds-badge_lightest">
                {recordStart}-{recordEnd} of {totalRecords} | Page {pageNumber} of {totalPages}
            </span>
            <div class="slds-p-left_xx-small">
                <lightning-button label="Next"
                disabled={isNext} onclick={handlePageNextAction}
                                    variant="brand"
                                    icon-name="utility:forward"
                                    icon-position="right"
                                    name="next"></lightning-button>
            </div>
        </div>  

    </lightning-card>
</div>

`

Step 2:- Create Lightning Web Component : contactPaginationLwc.js

` import { LightningElement, wire, api, track } from 'lwc';

import getContactList from '@salesforce/apex/contactPaginationLwcCtrl.getContactList';

export default class ContactPaginationLwc extends LightningElement {

@track recordEnd = 0;
@track recordStart = 0;
@track pageNumber = 1;
@track totalRecords = 0;
@track totalPages = 0;
@track loaderSpinner = false;
@track error = null;
@track pageSize = 10;    
@track isPrev = true;
@track isNext = true;
@track contacts = [];

connectedCallback() {
    this.getContacts();
}


handlePageNextAction(){
    this.pageNumber = this.pageNumber+1;
    this.getContacts();
}


handlePagePrevAction(){
    this.pageNumber = this.pageNumber-1;
    this.getContacts();
}


getContacts(){
    this.loaderSpinner = true;
    getContactList({pageSize: this.pageSize, pageNumber : this.pageNumber})
    .then(result => {
        this.loaderSpinner = false;
        if(result){
            var resultData = JSON.parse(result);
            this.recordEnd = resultData.recordEnd;
            this.totalRecords = resultData.totalRecords;
            this.recordStart = resultData.recordStart;
            this.contacts = resultData.contacts;
            this.pageNumber = resultData.pageNumber;                
            this.totalPages = Math.ceil(resultData.totalRecords / this.pageSize);
            this.isNext = (this.pageNumber == this.totalPages || this.totalPages == 0);
            this.isPrev = (this.pageNumber == 1 || this.totalRecords < this.pageSize);
        }
    })
    .catch(error => {
        this.loaderSpinner = false;
        this.error = error;
    });
}


get isDisplayNoRecords() {
    var isDisplay = true;
    if(this.contacts){
        if(this.contacts.length == 0){
            isDisplay = true;
        }else{
            isDisplay = false;
        }
    }
    return isDisplay;
}

}`

Step 3:- Create Lightning Web Component : contactPaginationLwc.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>

Step 4:- Create Apex Class : contactPaginationLwcCtrl.cls
` public with sharing class contactPaginationLwcCtrl {

public class ContactItemWrapper {       
    public Integer recordStart {get;set;}
    public Integer pageNumber {get;set;}
    public Integer totalRecords {get;set;}
    public Integer recordEnd {get;set;}
    public Integer pageSize {get;set;}       
    public List<Contact> contacts {get;set;}
}

@AuraEnabled
public static String getContactList(Integer pageSize, Integer pageNumber){
    String jsonObjItm = '';
     
    
    Integer offset = (pageNumber - 1) * pageSize;         
    
    Integer totalRecords = [SELECT COUNT() FROM Contact];
    Integer recordEnd = pageSize * pageNumber;
     
    ContactItemWrapper conObj =  new ContactItemWrapper();  
    conObj.pageNumber = pageNumber;
    conObj.pageSize = pageSize;        
    conObj.recordStart = offset + 1;
    conObj.recordEnd = totalRecords >= recordEnd ? recordEnd : totalRecords;
    conObj.totalRecords = totalRecords;
    conObj.contacts = [SELECT Id, Name, FirstName, LastName, Email, Phone, Title FROM Contact LIMIT :pageSize OFFSET :offset];
    jsonObjItm = JSON.serialize(conObj);
    return jsonObjItm;
}

}`

→ Get source code live demo link:-