Salesforce lightning component pagination using server-side controller

Salesforce Lightning Component:-

A new UI framework, Salesforce Lightning Component accelerated the development and app performance. Use to develop a single page web applications for mobile and desktop devices, it offers responsive user interfaces and uses JavaScript and Apex on the client and server side respectively. It helps in developing custom components that can be reused as building blocks for communities, mobile apps running on Salesforce and Lightning experience seamlessly.

With API version 45.0, the Lightning components can be build using two programming models: –

Lightning Web Components model
Original Aura Components model.

Creating Pagination in Lightning Component:-

Pagination helps in delivering the needed result to the user in sets or chunks and not the entire data. The implementation of Pagination in Lightening Component can be done in two ways:

Using Server Side Controller Call for every page.
Using Client Side Controller Call for every page by fetching data all at once.

This article shares an example on creating pagination in lightning component using server side controller.

Few points that need to incorporate while pagination with the server side controller are as follows:-

Load the data from the server in pieces with the queries to fetch X number of records at a time.
Use LIMIT (limit the result page) and OFFSET (skips the results that will not show) in the SOQL query
Make server side calls to retrieve the data for every page.
Show total page count and total record count.
Use “(cacheable=true)” annotation (caches the data on client side) in the apex class to make component performance faster.

For Live Demo Click here

Step 1: - Create Apex Class Controller [AccountPagination]

Step 2: - Create Lightning Component [Pagination_Example.cmp]

Step 3 – JS Controller [Pagination_ExampleController.js]

Step 4 – JS Helper [Pagination_ExampleHelper.js]

Step 5: - lightning App [Pagination_ExampleApp]

Support:

Above was an example on creating pagination in Salesforce lightning component using server side controller. For further queries or assistance regarding your Salesforce apps and lighting experience, please feel free to reach out to us on +1(415) 992-6421 or drop us a mail at sales@hicglobalsolutions.com.

Share This Blog

Salesforce Lightning Component:-
Creating Pagination in Lightning Component:-
Few points that need to incorporate while pagination with the server side controller are as follows:-
For Live Demo Click here
Step 1: - Create Apex Class Controller [AccountPagination]
Step 2: - Create Lightning Component [Pagination_Example.cmp]
Step 3 – JS Controller [Pagination_ExampleController.js]
Step 4 – JS Helper [Pagination_ExampleHelper.js]
Step 5: - lightning App [Pagination_ExampleApp]
Support:

Pagination in lightning component using server-side controller