Lightning Pagination with page number navigation – Using Client Side Controller

Lightning Pagination with page number navigation – Using Client Side Controller

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

In our previous post, we have used the server-side controller method to achieve pagination in Lightning. Please read the previous post for pros and cons of both methods.

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

Component – LightningPaginationClientSide.cmp

Client-Controller – LightningPaginationClientSideController.js

Client-Helper – LightningPaginationClientSideHelper.js

Style – LightningPaginationClientSide.css

Server-Controller -AccountController.apxc

Below would be the output of above code:


Which approach should I use:

  • If I am dealing with records less than 10k, I would go for client-side controller approach.
  • Anything above than 10k, I would go for server-side controller approach with client-side cache for better performance.

This completes Lightning Pagination series. Stay tuned for some awesome articles.


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 24 Comments

  1. Its a very needed component and almost everyone face this requirement.

    You elaboration and implemention very informative. Great work.

    This helped me to create a resusable component with very less customization.

    Thanks Manish for sharing ur knowledge on this.

  2. Hi Manish,
    I want to display a checkbox for every record and then update the selected records.
    I am not sure how to implement both pagination as well as selection of multiple records.When I used both, I am losing the previously selected records when I click next button as these are two different list.
    Can you please help me here

    1. Hi Ankita,

      You can store the ids of all selected rows, and then you can pass the list of ids to “selectedRows” attribute of datatable.
      For example, let’s say you have Ids of all the rows which you have selected inside attribute named as “selectedIds” of List type, then in your controller, you use something like below to select your rows again:
      component.find(““).set(“selectedRows”, component.get(“v.selectedIds”));

      1. Anita, did you implement this after Manish’s comments? If yes, please let me know how did you do that.

        @Manish, how do we get Ids of all selected rows?

        1. Hi Lokesh,

          Add onrowselection selection event in datatable. Declare datatable like below:

          columns=”{! v.columns }”
          data=”{! }”
          onrowselection=”{! c.getAllRows}”

          Now in your controller, define getAllRows method like this:

          getAllRows : function (component, event) {
          var selectedRows = event.getParam(‘selectedRows’);
          component.set(‘v.selectedRowsCount’, selectedRows.length);

          This way you would be able to get the rows.

          1. Hi Manish,

            Thanks for the reply!
            When I select a few rows (say first 3 rows) in the first page (pagination-client side) and go to next page, I see that first 3 rows of 2nd page are selected already and then if I go to previous page(1st), the originally selected rows are lost… How do I set this right? I cannot set dataTable attribute ‘selectedRows’ inside onrowselection client controller method and I keep on getting error ‘this component doesnt allow mutation….’. Please help 🙂

          2. Hi Lokesh,

            You mean when you navigate to the 2nd page, it shows first 3 rows selected even when they were selected in page 1? That shouldn’t be the case until the roes and ids are exactly the same on the 2nd 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.

            Let me know if this helps!!

  3. Hi Manish,
    I want to display a checkbox for every record and then based on the selected records i have one Preview button to display this will not work Lightning Datatable so can you please help me or guide me any solution.
    IMP:Indexing is not working


    1. Hi Lucky,

      You can use lightning datatable attribute hideCheckboxColumn and set it to false, to show checkbox for each row.

      Whenever a new row will be selected, onRowSelection listener will be fired which you can handle in your controller and do your thing there.

      Hope this helps!!

  4. Good Article

  5. It is really helpful for me. Thank You! :).
    I have a little question.
    I write so many console.log() in controller’s onRowSelection() function,then I find out that if i go straight to the second page and click one checkbox,The Id of that line wouldn’t be save into v.selection.But if i click twice again,that Id will be save into v.selection.
    After I check a little while,the problem is program go to
    component.set(“v.hasPageChanged”, false);
    It cause the problem happened.
    I write a button and it’s disabled attribute is related with v.selection value,if value is empty,disabled=true,I can’t click that button.
    because it seems to click the checkbox ,actually it’s not in v.selection
    So how to deal with this problem?

  6. One fix for the apex class with the above code

    Then only it will work.

  7. this code is not working for me, can please assist me ?

  8. you cant go to 6 current page with the next function

  9. for(; x<=(pageNumber)*pageSize; x++){


    this will display 11 records if the page size is 10.
    correction would be
    for(; x<(pageNumber)*pageSize; x++){

  10. How can I implement this concept into web component ?.

    1. I will post the web component version as well. For now, you need to use the same logic in your web component’s controller as you are using here in aura component.

  11. Hi Manish can you send me with the lightning code for above pagination

  12. Used your code for pagination but the whole list of data (around 1100 records) are displayed in the same page, generatePageList and buildData methods are wring correctly. Not able to find out what can be the reason. Which attribute is responsible for showing the number of records in screen at a time?

  13. Hi Manish

    how to explain the lookup fields in lightning component for interview what are the key points need to say for clear the interview

  14. Hello Manish, Do you have the web component version of this

  15. Hi Manish,

    If you have more than 1,00,000 records after filter, how it going to be handle in apex and js files. Because as known offset will not work with more than 2,000 records and return all records from query must cause run time issue and heap size issue.

    Can you shadow your thoughts in this ?

Leave a Reply

Close Menu