Hello, friends today we will discuss Pagination in LWC Datatable Salesforce. Pagination is used for displaying large amounts of data in chunks. Using pagination we can control the number of records displayed on each page.
Check this: Lightning Component Datatable with Sorting and Pagination
Process & Code :
PaginationTechdicer Component:– This is the Main Component to show the record with pagination
paginationTechdicer.Html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <template> <lightning-card title="Pagination in LWC Datatable" icon-name="standard:contact"> <!-- Datatable with Pagination End --> <div class="slds-m-around_medium"> <div> <lightning-datatable key-field="id" data={data} columns={columns}> </lightning-datatable> </div> </div> <!-- Pagination Buttons Start --> <div class="slds-align_absolute-center"> <lightning-button label="Previous" icon-name="utility:chevronleft" onclick={previousHandler} disabled={isPreviousDisable}> </lightning-button> <span class="slds-badge slds-badge_lightest" style="margin-right: 10px;margin-left: 10px;"> Displaying {startingRecord} to {endingRecord} of {totalRecountCount} records. Page {page} of {totalPage}. </span> <lightning-button label="Next" icon-name="utility:chevronright" icon-position="right" onclick={nextHandler} disabled={isNextDisable}> </lightning-button> </div> <!-- Pagination Buttons End --> <!-- Datatable with Pagination End --> </lightning-card></template> |
PaginationTechdicer.JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | import { LightningElement, wire } from 'lwc';import retrieveAccounts from '@salesforce/apex/DataController.retrieveAccounts';import { ShowToastEvent } from 'lightning/platformShowToastEvent';const columns = [ { label: 'Name', fieldName: 'Name' }, { label: 'Type', fieldName: 'Type' }, { label: 'Industry', fieldName: 'Industry' }, { label: 'BillingCountry', fieldName: 'BillingCountry' }, ];let i=0;export default class PaginationTechdicer extends LightningElement { page = 1; //initialize 1st page items = []; //contains all the records. data = []; //data displayed in the table columns; //holds column info. startingRecord = 1; //start record position per page endingRecord = 0; //end record position per page pageSize = 10; //default value we are assigning totalRecountCount = 0; //total record count received from all retrieved records totalPage = 0; //total number of page is needed to display all records @wire(retrieveAccounts) wiredAccounts({ error, data }) { if (data) { this.items = data; this.totalRecountCount = data.length; this.totalPage = Math.ceil(this.totalRecountCount / this.pageSize); //here we slice the data according page size this.data = this.items.slice(0,this.pageSize); this.endingRecord = this.pageSize; this.columns = columns; this.error = undefined; } else if (error) { this.error = error; this.data = undefined; this.showToast(this.error, 'Error', 'Error'); //show toast for error } } //press on previous button this method will be called previousHandler() { if (this.page > 1) { this.page = this.page - 1; this.displayRecordPerPage(this.page); } } //press on next button this method will be called nextHandler() { if((this.page < this.totalPage) && this.page !== this.totalPage){ this.page = this.page + 1; this.displayRecordPerPage(this.page); } } //this method displays records page by page displayRecordPerPage(page){ this.startingRecord = ((page -1) * this.pageSize) ; this.endingRecord = (this.pageSize * page); this.endingRecord = (this.endingRecord > this.totalRecountCount) ? this.totalRecountCount : this.endingRecord; this.data = this.items.slice(this.startingRecord, this.endingRecord); //increment by 1 to display the startingRecord count, //so for 2nd page, it will show "Displaying 6 to 10 of 23 records. Page 2 of 5" this.startingRecord = this.startingRecord + 1; } showToast(message, variant, title) { const event = new ShowToastEvent({ title: title, message: message, variant: variant, mode: 'dismissable' }); this.dispatchEvent(event); }} |
paginationTechdicer.js-meta.xml
1 2 3 4 5 6 7 8 9 10 | <?xml version="1.0"?> <apiVersion>51.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> <target>lightning__Tab</target> </targets></LightningComponentBundle> |
Apex Class :
1 2 3 4 5 6 7 8 | public with sharing class DataController { @AuraEnabled (cacheable=true) public static List<Account> retrieveAccounts(){ return [SELECT Id, Name, Type, BillingCountry FROM Account LIMIT 2000]; }} |
Output :
Reference:
What’s your Reaction?
+1
3
+1
+1
+1
+1
+1
Total views : 1154156
