How to implement Pagination in Lightning Component – Client Side(JS)

How to implement Pagination in Lightning Component – Client Side(JS)

Hi All, It has been quite a long time since I have posted a blog about lightning components. In this tutorial, we will see how to implement Pagination using Client Side Controller(JS) with Lightning Data table.

Scenario: – Mr. X is Sales Rep at ABC Company and X wants to see those records  (Opportunity/Lead) that have been created in last 30 days and wants to do some mass actions on the selected records.

Problem: – The main problem here is “There may be more than 1K or more records created in last 30 days and because of limitations of Salesforce we cannot show all the records into a single Component.”

Solution: –  Mr. Y, who is working as a developer suggested to use the concept of Pagination.

Implementation: – 

List of components used in this implementation

  • Pagination.cmp – Lightning Component to display the records.
  • PaginationController.js – Client Side Controller for above component and responsible for calling the helper(JS) method.
  • PaginationHelper.js – Client Side helper javascript file which is responsible for calling the Server side(Apex) methods and do all the stuff related to pagination.
  • PaginationController.apex – Server Side controller to fetch the records.
  • PaginationApp.app – Lightning App which includes Pagination.cmp lightning component and displays the result.

Below is the code snipet of the Lightning App

<aura:application extends=’force:slds’ >
                 <c:Pagination />
</aura:application>

Application

 

You can find the complete code from my Github Repo – “Here“.

Output with pagination

Pagination

If you have any issue/thoughts then please let me know in the comment section.

Sharing is caring 🙂

 

AMIT SINGH

My name is Amit Singh. I am a Certified Advanced Salesforce Developer. I am 4X salesforce certified professional @PureSoftware Ltd. I love to solve the queries in Salesforce Success Community and Developer forum. I am in love with Salesforce because of its continuous improvement. Inject trailhead into your blood and you will be a salesforce champion

leave a comment

Create Account



Log In Your Account