Sign In Sign Up

Sign In Sign Up

Let's Learn AdonisJS 6

Playing Next Lesson In

seconds

Let's Learn AdonisJS 6

Let's Learn AdonisJS 6 #8.6

How To Paginate Filtered Query Results

In This Lesson

We'll learn about AdonisJS Model Query Builder pagination and walk through an example of how we can easily paginate the results of our filtered movies.

Created by: @tomgobich
Published: 1 year ago

Join the Discussion 1 comments

1 year ago

Hey all! Somehow, I completely missed that there's a queryString method available on the paginator that allows us to define additional query string key/values. We'll patch this in down the road, but wanted to make a note here that it is available!

async index({ request, view, auth }: HttpContext) {
  const page = request.input('page', 1)
  const filters = await movieFilterValidator.validate(request.qs())
  const movies = await MovieService.getFiltered(filters, auth.user).paginate(page, 15)
  const movieStatuses = await MovieStatus.query().orderBy('name').select('id', 'name')
  const movieSortOptions = MovieService.sortOptions
  const qs = querystring.stringify(filters)

  movies.baseUrl(router.makeUrl('movies.index'))
 movies.queryString(filters)

  const rangeMin = movies.currentPage - 3
  const rangeMax = movies.currentPage + 3
  let pagination = movies.getUrlsForRange(1, movies.lastPage).filter((item) => {
    return item.page >= rangeMin && item.page <= rangeMax
  })

  if (qs) {
    pagination = pagination.map((item) => {
      item.url += `&${qs}`
      return item
    })
  }

  return view.render('pages/movies/index', {
    movies,
    movieStatuses,
    movieSortOptions,
    filters,
    pagination,
    qs,
  })
}
  
    
      Copied!

2

Transcript

So currently on our movies list, we just have our static list of 15. We can't go beyond the initial 15 results that we get back.
Well, that's where pagination comes into play. So let's hide our browser back away and let's get that added into our query. So the first thing that we're gonna wanna do is be able to accept in a page for our getFiltered method.
So we'll do page and that type will be number. If we don't have a page, we'll just default that to one because we'll always want a value for it.
Then we can scroll down and this will replace our limit. The pagination method is available on both the model query builder as well as the database query builder. We just call it via paginate like so.
It accepts in the page number that we want, which is our page parameter. And then the number of items that we want per page and we're using 15 for that. This does alter the type that we're returning back
from a model query builder to now a model paginator contract of type movie. And if we jump into the documentation, there's a pagination page and we can see that this adds some additional information
specifically for paginating our results. Now, what we're taking a look at here is the simple paginator class, but these same properties are also on the model paginator result. And if we scroll down a little bit further,
real quick, they do note that you do wanna order your results to keep the results per page consistent, but they also show that you can display a list
of pagination links using this paginator as well. So you define the base URL on the results that you get back from the paginate method. And this URL you're going to want to be query stringless.
So you don't want query strings to be on it because this will apply the query string for the page to it. Then if we scroll down a little bit further, they'll see that there's another method, get URLs and range, where you pass in the start of the range
and the end of the range, and it will give you back an object like so with the URL. And this is that base URL that we defined via the base URL method, and then a query string for the current items page.
And then that current items page as an accessible property, whether or not that current item is active and whether or not that current item is a separator. So if we hide that back away, jump out of our browser
and give our movie service here a save, jump back into our movies controller. Let's scroll up to our index method here. First and foremost, we need to provide a page into our get filtered. We could add that into our filter validator,
but there's instances where we're going to want the filter data without the page on it. So it's just easier to keep these separate as a whole. So we'll do const page equals request,
and we'll use the input method to reach specifically for the page on the query string. Our get filtered is going to apply a default to that if there isn't one. So we'll just provide it straight in like so.
As for that base URL, we can either add that in as an option to our get filtered call, or we can add that out here within our controller. Since we're not actually awaiting the query within here,
but we're returning back the model paginator and not actually executing the query until we await it right here, let's go ahead and apply our base URL out here inside of our control.
So we can do movies.baseURL. Let's import our router from a.sjs core services router, hit tab to auto import that, and use a method called makeURL. This method is actually the same one
that's provided via route within EdgeJS. So we just need to provide it the route identifier. In our case, that's movies.index. You can also get at that information
via the route property off of your HTTP context. It'll be available via route.name. However, a value for that may or may not be provided depending on how you have your route defined,
but do note it's available there. Cool. So if we give that a save, let's jump back into our index page and let's get our pagination added. So before our end call there, that ends out our layout,
let's do a div class flex items center, and maybe a gap of two. Then we'll want our at each item in movies.getURLsFrom.
Range, specify one as the start and movies.lastPage as the end. We'll go ahead and end our each there as well,
and just do a quick anchor, href item.url, and then item.page to list out the actual page for the URL there.
We'll do class with four, h4, flex items center, justify center, border, and border, slate maybe 200, and make that rounded as well.
Okay, give that a save. Let's jump back into our browser, and whoop, let's get URLs for range. My bad, for range right there. Jump back into our browser now, give that a refresh. There we go, okay.
So let's scroll down and see what we have for pagination. All right, forgot to add a padding to those, but we do see one, two, three, four, all the way up through our last page of 28.
So if we were to click on 28 here, note that we're sorting by default by title ascending, so we just jumped down to the end of our alphabetical list. Cool, if we jumped somewhere in the middle,
we'll be somewhere in the middle of our alphabetical list, and then if we jump back to one, we'll be at the start of our alphabetical list. All right, so that seems to be working A-okay. Ideally though, we don't wanna show all 28 pages
that we have available, because at some point that's gonna start wrapping. So let's hide our browser back away, and let's define what our range actually is. So let's move this out into our controller.
So let's give that a cut, jump up to our controller, and after we've added in that base URL, let's do const, and we'll just call this our pagination, equals, and we'll paste that in.
Then we'll also filter it down to just the items that we care about. So let's filter item, just like so. So there's a ton of different ways that we can go about discerning what items
we want to include within our pagination. I think the most straightforward approach for us here today to keep us on time is to go minus three and plus three from the current index, and then just remove out those
that aren't applicable to our range. So do const range min equals movies dot, and there is a current page option that we have available
to get the current pagination page, and we could do minus three there, and then const range max equals movies dot current page plus three.
So from our filter, we can return, if item dot page is greater than or equal to our range min,
and item dot page is less than or equal to our range max, then we'll go ahead and use the range item. It would also be great to go ahead
and just keep one and 28 inside of that range as well. So we'll do if item dot page equals one,
or item dot page equals our movies dot last page, then we'll just go ahead and return true to always include those. Give it a save to fix our formatting,
and let's go ahead and apply our pagination into our page state. So pagination there, give it a save, jump back into our page, and now let's loop over our pagination items.
Give that a save. While we're here, maybe we'll switch this to eight because that looked pretty tight, and let's add a padding of two, and give that a save. All right, let's jump back into our browser. Let's see what we got.
So we got one, two, three, four, and 28. So since we're currently on page one, we see one. We've removed one minus three because that's out of our range,
but we do have one plus three up to four, and then we've auto-included 28. If we jump to four, scroll down, then we start to see our current page of four minus three,
which takes us back to one, as well as plus three plus our last page there as well. Then if we jump to 28, we should see the opposite of what we saw with one. We can go minus three,
but we don't go plus three out of our range. And keeping one and 28 there allows us to always be able to jump to the front and the back of the pack. Okay, so one thing that we do need to take care of is,
let's say we're filtering our list down to just those that contain T in the title. All right, so within our pagination list, that takes us down from 28, I think we were at, down to just 20 pages.
And we have some query strings here applied for our filters. So if we take a look at what we have down here in the bottom left-hand corner, you can see it's just going to reapply with page. So it's gonna get rid of our filter
if we then click on the pagination. What we want is for this to maintain our filters. So let's hide our browser back away and jump into our movies controller.
And essentially what we wanna do is take our filters and convert that into a query string. So for that, we can use a Node.js module called query string.
So let's import query string from node query string. Let's jump down here. We could do const qs equals query string dot,
and there's a stringify method that we can use, pass our filters into it, and it will provide us back a query string safe version of our filters. Again, we don't want to apply that here to the base URL
because the base URL needs a path without a query string in it because it will add the query string to it. So let's switch our pagination here to a let and do an if we have a query string
because we don't need to apply any of this if we don't have a query string to append onto our pagination items. Pagination equals pagination dot map item,
item dot URL plus equals, and then we'll just add in an ampersand with our query string to it and return back the item. Give that a save.
And let's jump back into our browser, give it a refresh. Actually, we need to reapply a filter here. So let's go ahead and reapply back our T filter, scroll back down. And now if we hover over these, we should see that we get back,
oh, it jumped over to the right side, but you should see page equals one, search equals T, that is equal zero and sort equals title ascending. So regardless of what page we click on here,
we're going to maintain our filters throughout all of our pages. So next we need to highlight the currently active page. Our pagination holds that information for us. So we can jump into our index dot edge.
Let's go ahead and just break this down and let's actually switch this to HTML, ATTRS. Href is item dot URL class.
And we'll provide that as an array. Oh, hold on a minute. We need to do this within, there we go. Need to add that inside of interpolation. So we'll break that down, fire class just like so.
And then we'll add our conditional class if the item is active. So for our active item, maybe we'll do BG indigo and let's say maybe 300.
And then we can get rid of our other attributes here. Give that a save. And let's see how that worked out. Yeah, it's not very pretty, but it does show. All right, let's switch that to slate 100
and border indigo 500. That was about that. All right, let's see how that looks. Here we go, that's a little bit better. So now if we click on five, or that was four. So now we have some form of pagination
happening here as well.

Let's Learn AdonisJS 6

113 Lessons

14h 15m

Introduction

1

Fundamentals

2

Building Views with EdgeJS

3

Database and Lucid ORM Basics

4

Lucid ORM Relationships

5

Working With Forms

6

Authentication & Middleware

7

Filtering and Paginating Queries

8

User Watchlist

9

User Profiles

10

Admin Panel

11

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.

Sign up Sign in