Technology has always been a bridge, but today, it feels more like a mirror. With the rapid rise of AI , we are seeing things enter our lives and leave them at a pace we can barely track. To understand where this is going, we first have to understand how technology actually impacts the core of who we are. The Survivalist vs. The Ego Our minds are biologically wired for one thing: survival . We are designed to handle the worst-case scenario, an ancient instinct gifted to us by nature. We consider ourselves conscious decision-makers, but a critical question remains: Who is really making the call?
Here are some code examples for implementing pagination in Lightning Web Components (LWC):
1. Basic Pagination:
import { LightningElement, track } from 'lwc';
const PAGE_SIZE = 10; // Number of items per page
export default class PaginationExample extends LightningElement {
@track currentPage = 1;
@track totalItems = 0;
// Your data retrieval logic goes here
fetchData() {
// Fetch data from server and update totalItems count
// This method should be called whenever you want to update the pagination
// and fetch the data for the current page.
}
handlePageChange(event) {
this.currentPage = event.detail;
this.fetchData();
}
}
HTML:-
<template>
<c-paginator
current-page={currentPage}
total-items={totalItems}
page-size={PAGE_SIZE}
onpagechange={handlePageChange}
></c-paginator>
<!-- Render your data here based on the current page -->
</template>
2. Paginator Component:
// JavaScript file: paginator.js
import { LightningElement, api } from 'lwc';
export default class Paginator extends LightningElement {
@api currentPage;
@api totalItems;
@api pageSize;
get totalPages() {
return Math.ceil(this.totalItems / this.pageSize);
}
get isFirstPage() {
return this.currentPage === 1;
}
get isLastPage() {
return this.currentPage === this.totalPages;
}
handleFirstPage() {
if (!this.isFirstPage) {
this.dispatchPageChangeEvent(1);
}
}
handlePreviousPage() {
if (!this.isFirstPage) {
this.dispatchPageChangeEvent(this.currentPage - 1);
}
}
handleNextPage() {
if (!this.isLastPage) {
this.dispatchPageChangeEvent(this.currentPage + 1);
}
}
handleLastPage() {
if (!this.isLastPage) {
this.dispatchPageChangeEvent(this.totalPages);
}
}
dispatchPageChangeEvent(page) {
const pageChangeEvent = new CustomEvent('pagechange', {
detail: page,
});
this.dispatchEvent(pageChangeEvent);
}
}
<!-- HTML file: paginator.html -->
<template>
<div class="pagination">
<button
class="pagination-button"
disabled={isFirstPage}
onclick={handleFirstPage}
>
First
</button>
<button
class="pagination-button"
disabled={isFirstPage}
onclick={handlePreviousPage}
>
Previous
</button>
<span class="pagination-text">
Page {currentPage} of {totalPages}
</span>
<button
class="pagination-button"
disabled={isLastPage}
onclick={handleNextPage}
>
Next
</button>
<button
class="pagination-button"
disabled={isLastPage}
onclick={handleLastPage}
>
Last
</button>
</div>
</template>
These code examples demonstrate a basic implementation of pagination in LWC using a paginator component. The PaginationExample component is responsible for fetching data and updating the current page. The Paginator component handles the rendering of pagination buttons and dispatches a custom event when a page change occurs.
Note that the code provided is a starting point and may need modification based on your specific use case and requirements.