Let’s be honest—most of us have been using Windows since we were kids. It’s the backbone of the corporate world and feels like the default choice for every computer user. For years, I thought it was the only real option. But what if I told you there isn't just an "alternative" out there, but a genuine upgrade? When people talk about switching to Linux , it can feel overwhelming because there are so many versions. However, I want to talk specifically about Ubuntu .
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.