Pagination and Infinite Scroll in Phoenix

Photo by Olga Tutunaru on Unsplash

What is Pagination?

Think of your data like a big massive book. It has lines and lines of information. However, like in a regular book. We can’t store all of that information on a single page.

What is Infinite Scroll?

Pagination is separate from infinite scroll. You could implement pagination simply by having a load-more button that triggers your request to grab the next 10 pages.

How Do We Code This In Phoenix?

Now that you understand the concept of pagination and infinite scrolling, how do you add it to a phoenix application?

How Do You Paginate an Ecto Query?

I’m assuming you are already knowledgeable on Ecto Queries, so if you would like a quick refresher you can read my article Ecto with Phoenix in 4 Minutes.

How Do You Handle a load-more Event In Phoenix Liveview?

Likely, you’ll have a phoenix live view function to load more data.

How Do You Trigger The Load More Event?

You can trigger the load more event however you want, for example, you could have a “more” button that triggers the event when you scroll down far enough. In fact, that’s a great test to make sure that the event works correctly.

Final Thoughts.

You now have a much better understanding of pagination!

  • Infinite Scrolling
  • Loading more entries vs loading next entries and removing previous entries.
  • Implementing pagination with Ecto queries
  • Creating a load-more event to load more entries and attach them to the current data set.
  • Triggering the load more event when the user scrolls down using phoenix hooks.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Brooklin Myers

Brooklin Myers

Software Engineer. I create educational content focused on technology for mobile and web applications.