Code Files
HTML
<template>
<div>
<div class="slds-card slds-p-around_large" >
<div class="slds-text-align_right">
<div class="slds-p-bottom_large">
<lightning-button label="Previous" onclick={handlePrevious} disabled={disablePreviousButton}></lightning-button>
<lightning-button class="slds-m-left_large" label="Next" variant="brand" onclick={handleNext} disabled={deleteButtonReadOnly}></lightning-button>
</div>
</div>
<div class="slds-text-align_right">
<span class="slds-text-body_regular">
Displaying {currentPage} of {totalPages} Page
</span>
</div>
<div>
<lightning-datatable
data={lstRecords}
columns={columns}
key-field="Id"
show-checkbox-column="true"
sorted-direction={sortDirection}
sorted-by={sortedBy}
onsort={handleSortAccountData}
></lightning-datatable>
</div>
<div class="slds-text-align_right slds-p-top_small">
Total records: <b>{totalRecords}</b>
</div>
</div>
</div>
</template>Java Script
import { LightningElement, wire,track } from 'lwc';
import getRecords from '@salesforce/apex/PaginationDemoController.getRecords';
import { refreshApex } from '@salesforce/apex';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
export default class DatatablePagination extends NavigationMixin(LightningElement) {
objectName = 'Account';
lstRecords;
disablePreviousButton = true;
offset = 0;
totalRecords = 0;
currentPage = 1;
totalPages = 1;
recordPerPages = 5;
columns = [
{ label: 'Id', fieldName: 'Id', type: 'text' },
{ label: 'Name', fieldName: 'Name', type: 'text',sortable: true },
{ label: 'Account Number', fieldName: 'AccountNumber', type: 'picklist' },
{ label: 'Rating', fieldName: 'Rating', type: 'text' },
{ label: 'Created Date', fieldName: 'CreatedDate', type: 'date' , typeAttributes:{day:'numeric',month:'short',year:'numeric', hour:'2-digit',minute:'2-digit',hour12:true}},
];
headers ={
Id:"Id",
Name:"Name",
AccountNumber:"Account Number",
Rating:"Rating",
CreatedDate:"Created Date",
}
@wire(getRecords, { objectName: '$objectName', queryLimit: 5, offset: '$offset' })
getRecords(result) {
this.wiredRecords = result;
if (result.data) {
if(result.data.records && result.data.records.length){
this.totalRecords = result.data.totalRecords;
this.lstRecords = result.data.records;
this.totalPages = Math.ceil(this.totalRecords / this.recordPerPages);
} else{
console.error('Error fetching records', result);
}
} else if (result.error) {
console.error('Error fetching records', result.error);
}
}
handleNext() {
this.disablePreviousButton = false;
this.offset = this.offset + 5;
this.currentPage += 1;
}
handlePrevious() {
this.offset = this.offset - 5;
this.currentPage -= 1;
if(this.offset == 0) {
this.disablePreviousButton = true;
this.offset =0;
}
}
refreshData() {
refreshApex(this.wiredRecords);
}
showtoast(message, variant) {
this.dispatchEvent(
new ShowToastEvent({
title: message,
variant: variant
})
);
}
handleSortAccountData(event) {
this.sortBy = event.detail.fieldName;
this.sortDirection = event.detail.sortDirection;
this.sortAccountData(event.detail.fieldName, event.detail.sortDirection);
}
sortAccountData(fieldname, sortDirection) {
let parseData = JSON.parse(JSON.stringify(this.lstRecords));
let keyValue = (a) => {
return a[fieldname];
};
let isReverse = sortDirection === 'asc' ? 1: -1;
parseData.sort((x, y) => {
x = keyValue(x) ? keyValue(x) : '';
y = keyValue(y) ? keyValue(y) : '';
if(x > y){
return sortDirection === 'asc' ? -1 : 1;}
else if(y > x){
return sortDirection === 'asc' ? 1 : -1;}
else return 0;
});
this.lstRecords = parseData;
}
}Apex Controller
public with sharing class PaginationDemoController {
@AuraEnabled(cacheable=true)
public static Map<String, Object> getRecords(String objectName, Integer queryLimit, Integer offset) {
String query = 'SELECT Id, Name, AccountNumber, Rating, CreatedDate FROM ' + objectName + ' LIMIT ' + queryLimit + ' OFFSET ' + offset;
String queryWitoutLimit = 'SELECT Id, Name, AccountNumber, Rating, CreatedDate FROM ' + objectName;
List<sObject> lst = Database.query(queryWitoutLimit);
Integer size = lst.size();
return new Map<String, Object>{
'records' => Database.query(query),
'totalRecords' => size
};
}
}