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:

How to Create an Agentforce-Enabled Scratch Org in Salesforce

Setting up an Agentforce-enabled scratch org is the most important step for developers who want to experiment with AI features such as Prompt Builder and Einstein GPT. Whether you’re developing the next generation CRM software or experimenting with how generative AI may improve user experience, a scratch org equipped with Agentforce is your playground. Follow […]

Step-by-Step Guide to Enhance Your LWC Development Workflow with the Logger API

Are you looking to streamline your LWC development workflow but confused about how to do it? Then you are in the right place. The Salesforce Logger API is a powerful tool that helps you monitor, debug, and improve code quality in real time. This step-by-step guide walks you through how to set it up and […]

Enhancing Your Salesforce Experience with a Custom Activity Component

In today’s fast-paced business landscape, productivity hinges on streamlined workflows and intuitive interfaces. While Salesforce offers robust activity tracking capabilities, sometimes the standard components fall short of specific organizational needs. That’s where a Custom Activity Component comes in—designed to tailor your activity management experience, boost user efficiency, and provide deeper insights into customer interactions. In […]

A Step-by-Step Guide to Integrating Salesforce Doc-Gen with eSigning Tools

In today’s fast-paced digital landscape, streamlining document workflows is no longer a luxury—it’s a necessity. Integrating a document generation app, like Docs Made Easy, with an eSigning tool, helps businesses automate the entire document lifecycle—from creation to signature—saving time, reducing errors, and boosting productivity. In this guide, we’ll walk you through the key steps, tools, […]

How to Build a Real-Time Chat Application Using LWC and Models API

The Models API plays a significant role in providing access to and facilitating interaction with large language models (LLMs) from various Salesforce partners such as Anthropic, Google, and OpenAI. It enables applications to leverage these models for various tasks, including text generation and other AI-powered capabilities. As a user, you can configure any Salesforce-enabled model […]

How to Integrate Salesforce Data Cloud with Amazon Redshift Using Salesforce Identity Provider

Companies can finally connect Amazon Redshift to Salesforce Data Cloud without using the ordinary username & password authentication systems ever since its collaboration with AWS has happened. Business owners no longer have to be concerned about managing static credentials or breaching data security. By leveraging Salesforce IDP, companies can easily access their data lakehouse in […]

Pagination in lightning component using server-side controller