Salesforce LWC Custom Datatable Pagination
Biswajeet
November 28, 2020 2 Comments on Salesforce LWC Custom Datatable Pagination
Apex Class:
public class AccountController { @AuraEnabled//Get Account Records public static String getAccountList(Integer pageSize, Integer pageNumber){ String jsonDT = ''; //Offset for SOQL Integer offset = (pageNumber - 1) * pageSize; //Total Records Integer totalRecords = [SELECT COUNT() FROM Account]; Integer recordEnd = pageSize * pageNumber; AccountDTWrapper objDT = new AccountDTWrapper(); objDT.pageSize = pageSize; objDT.pageNumber = pageNumber; objDT.recordStart = offset + 1; objDT.recordEnd = totalRecords >= recordEnd ? recordEnd : totalRecords; objDT.totalRecords = totalRecords; objDT.accounts = [SELECT Id, Name, AccountNumber, Industry, Phone FROM Account LIMIT :pageSize OFFSET :offset]; jsonDT = JSON.serialize(objDT); return jsonDT; } public class AccountDTWrapper { public Integer pageSize {get;set;} public Integer pageNumber {get;set;} public Integer totalRecords {get;set;} public Integer recordStart {get;set;} public Integer recordEnd {get;set;} public List<Account> accounts {get;set;} } }
accountList.html
<template> <template if:true={loader}> <lightning-spinner alternative-text="Loading..." size="small"></lightning-spinner> </template> <div class="slds-box slds-theme_default"> <lightning-card title="Accounts"> <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="Account Number"> Account Number </div> </th> <th class="slds-is-resizable" scope="col"> <div class="slds-truncate" title="Industry"> Industry </div> </th> <th class="slds-is-resizable" scope="col"> <div class="slds-truncate" title="Phone"> Phone </div> </th> </tr> </thead> <tbody> <template if:true={accounts}> <template for:each={accounts} for:item="acc"> <tr key={acc.Id}> <th scope="row" data-label="Name"> <div class="slds-truncate" title={acc.Name}>{acc.Name}</div> </th> <th scope="row" data-label="Account Number"> <div class="slds-truncate" title={acc.AccountNumber}>{acc.AccountNumber}</div> </th> <th scope="row" data-label="Industry"> <div class="slds-truncate" title={acc.Industry}>{acc.Industry}</div> </th> <th scope="row" data-label="Phone"> <template if:true={acc.Phone}> <div class="slds-truncate" title={acc.Phone}>{acc.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={handlePrev} 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={handleNext} variant="brand" icon-name="utility:forward" icon-position="right" name="next"></lightning-button> </div> </div> </lightning-card> </div> </template>
accountList.js
import { LightningElement, wire, api, track } from 'lwc'; import getAccountList from '@salesforce/apex/AccountController.getAccountList'; export default class AccountList extends LightningElement { @track loader = false; @track error = null; @track pageSize = 10; @track pageNumber = 1; @track totalRecords = 0; @track totalPages = 0; @track recordEnd = 0; @track recordStart = 0; @track isPrev = true; @track isNext = true; @track accounts = []; //On load connectedCallback() { this.getAccounts(); } //handle next handleNext(){ this.pageNumber = this.pageNumber+1; this.getAccounts(); } //handle prev handlePrev(){ this.pageNumber = this.pageNumber-1; this.getAccounts(); } //get accounts getAccounts(){ this.loader = true; getAccountList({pageSize: this.pageSize, pageNumber : this.pageNumber}) .then(result => { this.loader = false; if(result){ var resultData = JSON.parse(result); this.accounts = resultData.accounts; this.pageNumber = resultData.pageNumber; this.totalRecords = resultData.totalRecords; this.recordStart = resultData.recordStart; this.recordEnd = resultData.recordEnd; 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.loader = false; this.error = error; }); } //display no records get isDisplayNoRecords() { var isDisplay = true; if(this.accounts){ if(this.accounts.length == 0){ isDisplay = true; }else{ isDisplay = false; } } return isDisplay; } }
accountList.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>50.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__Tab</target> </targets> </LightningComponentBundle>