Examples of code for implementing pagination with LWC

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.