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?
A Lightning Web Component (LWC) pagination code that you can use to implement pagination in your LWC components.
HTML Markup (pagination.html):
<template>
<div class="container">
<template if:true={displayItems}>
<ul>
<template for:each={displayItems} for:item="item">
<li key={item.id}>{item.name}</li>
</template>
</ul>
</template>
<div class="pagination">
<lightning-button-icon
icon-name="utility:chevronleft"
disabled={currentPage === 1}
onclick={previousPage}
alternative-text="Previous"
title="Previous"
></lightning-button-icon>
<template for:each={pageNumbers} for:item="pageNumber">
<lightning-button
key={pageNumber}
label={pageNumber}
variant={currentPage === pageNumber ? "brand" : "neutral"}
onclick={handlePageClick}
value={pageNumber}
></lightning-button>
</template>
<lightning-button-icon
icon-name="utility:chevronright"
disabled={currentPage === totalPages}
onclick={nextPage}
alternative-text="Next"
title="Next"
></lightning-button-icon>
</div>
</div>
</template>
JavaScript (pagination.js):
import { LightningElement, track, wire } from 'lwc';
import getItems from '@salesforce/apex/YourController.getItems';
const PAGE_SIZE = 10;
export default class Pagination extends LightningElement {
@track displayItems;
@track currentPage = 1;
@track totalPages;
pageNumbers = [];
@wire(getItems, { pageNumber: '$currentPage', pageSize: PAGE_SIZE })
wiredItems({ error, data }) {
if (data) {
this.displayItems = data.items;
this.totalPages = Math.ceil(data.totalCount / PAGE_SIZE);
this.pageNumbers = Array.from({ length: this.totalPages }, (_, i) => i + 1);
} else if (error) {
// Handle error
}
}
previousPage() {
if (this.currentPage > 1) {
this.currentPage--;
}
}
nextPage() {
if (this.currentPage < this.totalPages) {
this.currentPage++;
}
}
handlePageClick(event) {
this.currentPage = parseInt(event.target.value, 10);
}
}
In the above code, we have an LWC component called "Pagination" that fetches items from an Apex method called "getItems" using a wire adapter. The component displays a list of items and provides pagination functionality. The 'currentPage' variable keeps track of the current page number, and the 'totalPages' variable represents the total number of pages based on the total count of items fetched.
The component uses the @wire decorator to call the 'getItems' Apex method, passing the 'currentPage' and 'pageSize' as parameters. Whenever the wire data is received, the 'wiredItems' method is invoked, and it sets the fetched items, calculates the total number of pages, and generates an array of page numbers.
The component template displays the list of items using an '<ul>' element and iterates over the 'displayItems' array using the 'for:each' directive. It also renders pagination controls with previous and next buttons, and page number buttons using the 'for:each' directive and 'lightning-button' components.
The 'previousPage', 'nextPage', and 'handlePageClick' methods handle the click events for the pagination buttons, updating the currentPage accordingly.
Please note that you would need to replace YourController.getItems with the actual name of your Apex controller method that retrieves the items.
This is a basic example of LWC pagination, and you can modify and enhance it based on your specific requirements.