function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Elena ShaneElena Shane 

Pagination of a table in Lightning Design System

Hello!

I created my own Lightning app and Ligthnng Component. Also I use Lightning Desigh System.
I placed table in the component. And it has a lot of records. I would like to display records by pages and I would like to navigate between pages. How can I do pagination for my table? May be using Lightning Design System.

Thank you in advice!
James LoghryJames Loghry
Hi Elena!

How have you found the design sytem so far?  I think it's pretty awesome.  I've been tinkering with it for various projects, and finally feel I can create a coherent UI with it.

As you've probably found out already, the SLDS (acronym for the design system) doesn't come with any javascript, it's all CSS at least for web pages.  Therefore as developers, we have to develop our own solution (or find existing solutions) to utilize in conjunction with the css.

As a starting point, I would install the lightning app here: https://developer.salesforce.com/blogs/developer-relations/2015/06/creating-simple-real-estate-app-lightning-components.html.  There looks to be some pagination functionality in this you might be interested in.

Also, take a look at lightningdart.com  It's a dart-based framework that has some JavaScript capabilities built into it for handling stuff like SLDS datepickers, etc.  If anything, it might give you an idea of what's possible.

Additionally, you might want to consider a few additional ways to handle pagination (these are all speculative as I haven't tested out pagination functionality yet with lightning components, so you'll have to report back with what works best for your use case):
  • Depending on record size, you can utilize the SOQL OFFSET keyword for pagination in AuraEnabled method.
  • ​Again, in an AuraEnabled method, you could try to utilze the ApexPages.StandardSetController with built in prev / next / pageSize methods.  Even though you're not writing a VF component, you should still be able to use an SSC
  • Look to a third party javascript library like data tables, angular, jquery, infinite scrolling, etc. to handle pagination for you.
Lastly, you'll also want to style your pagination nicely. Look into how you can utilize button groups, buttons, and icons (all links on www.lightningdesignsystem.com) to make the next, previous, and page selection "pretty"

Hope that gives you somewhat of an idea for your next step.
SattibabuSattibabu
Great of you James ..it's nice info about Lightning pagination :)
Gautam Maheshwari 9Gautam Maheshwari 9
Hi James Loghry,

My external object actually returns >2000 records and we need to do pagination in lightning component. 
As per your second point, we can use standard set controller,  can you please provide an example for this? Thank you.
 
Poornima VelmururganPoornima Velmururgan
Hello Gauta Maheswari,

If you are still looking for a solution, Please check out our new Lightning component, Lightning Datatable Dev at https://appexchange.salesforce.com/listingDetail?listingId=a0N3A00000E9TBZUA3. In addition to pagination, It has mor features like searching, sorting, table and row level actions, mass update actions. Check out our blog (http://blog.softsquare.biz/embrace-lightning-with-lightning-datatable-dev/) for more information on our component. Please do contact us directly for more support poornima@softsquare.biz

Hope this helps you!

Thanks
sfdcMonkey.comsfdcMonkey.com
here is sample example for display records with pagination/pager buttons on lightning componenet
http://www.sfdcmonkey.com/2017/01/26/display-record-with-pager-buttons-lightning-component/
Hopes it helps
thanks
piyush parmarpiyush parmar
You can find out sample code for pagination on lightning components by client side. 

http://piyushparmar01.blogspot.in/2017/02/pagination-on-lightning-component.html

Cheers
Mr.HarryMr.Harry

Hey! @piyushparmar
Blog is removed on that link. when i click on that
can u share the link