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.

 

(Visited 6430 Times)

9 thoughts on “Lightning Pagination with page number navigation – Using Client Side Controller

  1. Dhananjay

    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.

    Reply
  2. Ankita

    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

    Reply
    1. Manish Choudhari Post author

      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”));

      Reply
      1. lokesh krishna sagi

        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?

        Reply
        1. Manish Choudhari Post author

          Hi Lokesh,

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

          lightning:datatable
          aura:id=”accountDataTable”
          columns=”{! v.columns }”
          data=”{! v.data }”
          keyField=”Id”
          hideCheckboxColumn=”true”
          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.

          Reply
          1. Lokesh

            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. Manish Choudhari Post author

            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. Lucky

    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

    Thanks,
    Lucky

    Reply
    1. Manish Choudhari Post author

      Hi Lucky,

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

      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!!

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *