Server Side Pagination (JavaScript) in LWC Salesforce

Pagination is a pretty cool bundle of logic, UI, and Apex to start your assignments with. Server-side Pagination is useful when you have to fetch records each time from the server (salesforce). LWC server-side pagination is faster than normal aura components.

LWC uses client JavaScript which your browser understands natively. This makes LWC super fast to work. With API version 45.0, the Lightning components can be build using 2 Salesforce programming models:  –

  • Lightning Web Components model
  • Aura Components model
Client-Side Pagination component features:
  • Generic component
  • Dynamic Object Selection
  • Dynamic Fields Selection
  • Super Fast to navigate between records
  • Accordion to switch between your data table and object/field selection.
  • Set the number of records to display at once i.e., 10, 25, 50, 100
Drawback:
  • This component is using offset in SOQL to query records whose limit is 2000 only.

Demo GIF:

pagination demo

You can Dynamically select any object and fields of that object.

object selection pagination lwc pagination fields selection

Step-1: Create an Apex controller

Our apex controller will fetch the object list, fields list, and records on processing. Here we are using a wrapper class which will return data to our LWC.

Create ServerSidePaginationController.cls Apex class.

Step-2: Now we will create the Server-Side Pagination Lightning Web Component.

Create a new web component serverSidePagination.

Now open the HTML file serverSidePagination.html and paste the below code.

Now open the JS file serverSidePagination.js and paste the below code.

Open the meta file serverSidePagination.js-meta.xml and paste the below code.

Step-3: Now we will call the component.

Create a test aura application test.app and paste the below code in it.

To see the output of the component, go to record page > click on setting gear on top and click on Edit Page. Now drop your component on the screen. Save and Activate the Page to Org Default. Now go back to your record. Your component is visible now.

client side pagination

You can also place this component on App Page and Home Page.

Also, check – Client-Side Pagination in LWC

Your component is now ready to use. Cheers …. Happy Coding … 🙂

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments