pagination lwc

Client Side (JavaScript) Pagination In Salesforce Lightning Web Components

Lightning Web Component

Pagination allows users to see the data chunks in an organized way. This article is about designing a solution for client side (JavaScript) pagination for lightning data table in salesforce lightning web components.

We will fetch data from apex server and will store in to the data. We will calculate then the no of
pages. We will calculate it by using the data per page.

Apex Class : [AccountClass .cls]

Check alsoHow to Create Lightning Web Component And Deploy To The Salesforce Org

LWC HTML File : [dataTablePagination.html]

JavaScript Code : [dataTablePagination.js]

Terminology’s used in the code:-
data = data fetched from server.
page = current page no.
perpage = data per page.
pages = number of pages = size of data/perPage.
set_size = no of the pages we want to show at a time. no of page number buttons.

Meta-XML File [dataTablePagination.js-meta.xml]

Output :

Documentation :

Here we are tracking two private variables pages and page. page is current page and initialized with 1. let’s go by piece by piece of this code. In LWC when the component is loaded on the page then constructor of the corresponding js runs and then it calls the connected callback function. In connected call back function we are fetching the data from our aura enabled apex method.

We are going to call the apex method imperatively in connected callback. As the getAccountList() will return a promise so we can handle it using the async await. After getting the data we set the data in tot our private variable data and then we call a function setPages to initialize the list pages.

As the await is an asynchronous process so the components renders and when the pages array is initialized again the component renders recuse we have marked the array pages as tracked property. So the component rerenders and this time the getter get pagesList() is computed and return the page numbers to display.

In the rendered call back function we highlight the current page button which is selected.In the rendered call back function we highlight the current page button which is selected.

To get the page data , the getter currentPageData is computed from component and then the page renders with the current page data.

Now when we click on button the page variable is being set to the current page and then it rerenders the component and then the getters are computed again. And so changing just one page variable is accomplishing our custom pagination task..

Cheers…

Related Resources :
Other popular Post :

Follow us for new post updates. & Don’t forget to bookmark this site for your future reference.

Facebook : https://www.facebook.com/sfdcmonkey/

Instagram : https://www.instagram.com/sfdc_monkey/

Buy me a coffeeBuy me a coffee

About The contributor: 

Rishabh Kumar

1 Post Contribute

Rishabh Kumar

Name – Rishabh Kumar
I have around 2.5 Yrs of Experince of salesforce development ,8x superbadages, Certified Platform Developer-1 and Platform Developer-2.
Email [email protected]

 

 

Articles by Rishabh:

  1. Client Side (JavaScript) Pagination In Salesforce Lightning Web Components

 

(Visited 2 times, 1 visits today)
(Visited 1,304 times, 1 visits today)

Leave a Reply