Do you have a requirement to create pagination in Lightning Component? Well, there are two ways to implement it:
- Using server-side controller call for every page
- 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
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.