Lightning Pagination – Using Server Side Controller And Client Side Cache

Lightning Pagination – Using Server Side Controller And Client Side Cache

Do you have a requirement to create pagination in Lightning Component? Well, there are two ways to implement it:

  1. Using server-side controller call for every page
  2. Fetching data once and using the client-side controller for every page

1. Using Server-Side Controller:

  • You need to use LIMIT and OFFSET values in SOQL query
  • You need to make the server-side call to retrieve the data for every page, which is pretty expensive (will come to this part later**)
  • You can never show total page count as you are not fetching the total record at once or you are not sure how many records will be returned
  • Better solution if you are dealing with many records as you can fetch n number of records.
  • Data loading will be same in almost all the pages

2. Using Client-Side Controller:

  • You need to fetch all the data in “init” handler itself and then operate on the dataset using the client-side controller
  • You can only fetch a limited set of data as fetching more data in one call is very expensive
  • Data loading will be expensive in the first call but will be very fast when swapping through pages as all data resides in client controller already

In this article, we will use the server-side controller to implement pagination:

Note**: To make component performance faster, I am using “Action.setStorable()” method, which will cache the data on client side and will improve component performance drastically.

Component – LightningPagination.cmp

Client-Controller – LightningPaginationController.js

Client-Helper – LightningPaginationHelper.js

Server-Controller -AccountController.apxc

Below would be the output of above code:

Stay tuned for client side pagination in lightning component.

Since we are using client side cache (setStorable) in this example, first call for every page will be going to server, but if the user comes to same page again, data will be loaded from client side cache and the performance will be lot faster.


Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has 9 Comments

  1. Hi Manish,

    First of all thanks for this wonderful post.

    Well, I have a doubt here. Since the OFFSET limit is 2000, then how would we be able to use server-side pagination for more than 2K records.


    1. Hi Rahul,

      If you want to fetch more than 2000 records, you need to filter out your results based on some unique filter like CreatedDate. Then you can fetch records like:
      1. CreatedDate > Date_1 AND CreatedDate < = Date_2 2. CreatedDate > Date_2 AND CreatedDate <= Date_3

  2. Hi Manish,
    This is one of the highly optimized Lightning Datatable with Pagination that I have come across.
    I was trying to implement the checkbox in this using the standard datatable which I am successfully able to do so.
    But when I am trying to maintain the state while navigating from the Next/Previous button, it is not holding the values.
    Do you have any idea about that?

    1. Hi Arpit,

      Yes, it is supposed to be like this since you are changing the data of data table when you are going to next/previous page.

      You can avoid this by maintaining an attribute of type list/object which will hold your currently selectRows (which you can get onRowSelection). Once you navigate to the different page, on click of the button you can set selectedRows = which will automatically select the rows for you.

      1. It is fixed out the way you explained, but now the problem I am facing is that whenever I am unchecking any checkbox, I am not able to capture which records checkbox is unchecked.

        Detailed steps below:
        1. Select any 2 records on the first page
        2. Deselect any 1 of them.
        3. Click on Next
        4. Click on the previous button.

        Expected Result: Only one record should be checked.
        Actual Result : Both records selected are checked/visible

        So, my question is, whenever a record is selected it fires “onrowselection” action, but how can I capture which record is deselected to remove from the selectedrecord attribute list we created earlier.?

        1. Hi Arpit,

          onRowSelection event gets fired in both scenarios, when a row is checked or unchecked. so you should be able to handle your logic there.

        2. im new beginner Manish.Can you provide the complete codee xample if its has more than 2000 records as im not able to implement what you said

  3. Hi,
    Regarding the action.setStorable() in javascript is only needed for the API version below 44.0. API version of 44.0 or higher, you must annotate the Apex method with @AuraEnabled(cacheable=true).

Leave a Reply

Close Menu