Implement Pagination in LWC: Step-by-Step Guide

public with sharing class OpportunityPaginationCtrl {
			@AuraEnabled(cacheable=true)
			public static List<Opportunity> fetchOpportunities(Integer pageSize, Integer offsetValue) {
				return [
					SELECT Id, Name, StageName, Amount
					FROM Opportunity
					ORDER BY CreatedDate DESC
					LIMIT :pageSize
					OFFSET :offsetValue
				];
			}

			@AuraEnabled(cacheable=true)
			public static Integer fetchTotalCount() {
				return [SELECT COUNT() FROM Opportunity];
			}
		}
		

import { LightningElement, track, wire } from 'lwc';
		import fetchOpportunities from '@salesforce/apex/OpportunityPaginationCtrl.fetchOpportunities';
		import fetchTotalCount from '@salesforce/apex/OpportunityPaginationCtrl.fetchTotalCount';

		export default class OpportunityPagination extends LightningElement {
			@track data = [];
			pageSize = 10;
			totalRecords;
			totalPages;
			currentPage = 1;

			connectedCallback() {
				fetchTotalCount().then(result => {
					this.totalRecords = result;
					this.totalPages = Math.ceil(this.totalRecords / this.pageSize);
					this.loadRecords();
				});
			}

			loadRecords() {
				let offsetValue = (this.currentPage - 1) * this.pageSize;
				fetchOpportunities({ pageSize: this.pageSize, offsetValue: offsetValue })
				.then(result => {
					this.data = result;
				});
			}

			handleNext() {
				if (this.currentPage < this.totalPages) { this.currentPage++; this.loadRecords(); } } handlePrev() { if (this.currentPage > 1) {
					this.currentPage--;
					this.loadRecords();
				}
			}
		}
		

<template>
			<lightning-card title="Opportunity List (With Pagination)">
				<template if:true={data}>
					<table class="slds-table slds-table_bordered">
						<thead>
							<tr>
								<th>Name</th>
								<th>Stage</th>
								<th>Amount</th>
							</tr>
						</thead>
						<tbody>
							<template for:each={data} for:item="opp">
								<tr key={opp.Id}>
									<td>{opp.Name}</td>
									<td>{opp.StageName}</td>
									<td>{opp.Amount}</td>
								</tr>
							</template>
						</tbody>
					</table>
				</template>

				<!-- Pagination Buttons -->
				<div class="slds-m-top_medium slds-align_absolute-center">
					<lightning-button label="Previous" onclick={handlePrev} disabled={currentPage === 1}></lightning-button>
					<span class="slds-m-around_medium">Page {currentPage} of {totalPages}</span>
					<lightning-button label="Next" onclick={handleNext} disabled={currentPage === totalPages}></lightning-button>
				</div>
			</lightning-card>
		</template>