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>

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

Output with pagination

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

Sharing is caring 🙂