Pagination First, Last, Next, and Previous Buttons

In This Lesson

We'll take a look at how to add pagination links to the next and previous pagination pages. Then, we'll follow the same process to add links to the first and last pagination pages.

Created by: @tomgobich
Published: 1 year ago

Join the Discussion 0 comments

Be the first to comment!

Transcript

Now we are missing a couple of things here with our pagination. We don't have a previous and a next button. So let's go ahead and get that added in. So let's hide our browser away
and let's first take care of our previous. So do @if movies.currentPage is greater than our movies.firstPage, which should always be one
and our if, and we'll go ahead and just copy our anchor here from our pagination items and paste it in. This one will never be active. So we can go ahead and simplify this back down
and let's go ahead and just switch this back to using attributes as we don't have anything special going on here. So we'll have an href, we'll fill that in here in a second, but we have the class copied. So we'll go ahead and paste that in first.
Okay, so for our href, there was a method on our movies via the paginator that allows us to get previous page URL. And this will return back a URL in the same fashion
that each of our pagination items is. Then instead of item.page, how about we just do an angle bracket there for previous so that we can keep the same width that we have going on for our items.
Let's go ahead and open up our browser and see what we got. So we have our angle right here, and we can see that it's doing movies page three as our previous page, 'cause we're currently on page four.
However, unlike our pagination items, it is getting rid of our filters. So we need to take care of that as well. So within our movies controller, I don't think we added the query string into our state.
We did not, but we can easily do that just like so. Give that a save, jump back into our index page and let's break these attributes down on two separate lines. And let's add another interpolation.
If we have a query string, then we'll want to concatenate it with an ampersand and apply it. Otherwise, we'll just do an empty string. So let's give that a save and test that real quick.
Okay, everything's just refreshed. Let's check it out. Cool, so now if we go back to page three, it keeps all of our filters in check. Awesome, so now we just need to reapply that for our next.
So we just give this entire block here a copy, go to underneath our pagination loop, paste it in and switch our check.
So if our current page is less than our movies last page, then instead of getting our previous page URL, we'll want to get our next page URL
and switch the direction of our angle bracket there. Let's jump back into our browser and now we have our next button as well. Next, let's say that we wanted double angle brackets
outside of our previous and next buttons rather than having them as literal numbers of one and 20 to serve it as our first and last page. First, what we'll want to do
is jump back into our movies controller and scroll up to where we have our filter and just remove this if statement right here. So now we'll only get items within our pagination range
of plus or minus three. Give that a save and then we can jump back into our index.edge page. And since we're already on our last, let's give that one there a copy and a paste.
And now instead of checking our current page, it gets another page or first or last, instead we could just do movies.hasPages. So if we have any pages that will show a last button
and instead of using the get next page URL, instead we'll use just get URL and pass our movies.lastPage page number in. Then we'll add in an additional angle bracket
'cause that traditionally represents jumping all the way to the end. Give that a save and we jump back into our browser and check that out real quick. Scroll back down and there we go.
So now we have a double angle pointing to our page 20 and we no longer have, well, we still have page one because that's within our minus three range, but we no longer have our page 20 being listed.
But if we click on our double angle brackets, we jump to that page 20. So now we need to do the same for our start. So tie that back away. We can give this if check here a copy,
scroll on up to where we have our previous button, paste it in, our if check remains the same. If we have any pages, then we'll wanna show this button,
but our get URL method argument changes from our last page to our first page and the direction of our angle brackets needs to flip. Give that a save now, jump back into our browser and there we go.
So now we have our first page. If we give that a click, we jump all the way to one. Our previous button goes away because we no longer have another previous page to go to, but we can go to the next
and we can also now jump to the last and there's our previous button again. So we can click on that and we go back to 19. Cool, so everything there seems to be working okay. Before we run this out, let's give this entire block here
just a little bit of padding. So we do padding top, maybe three and padding bottom, maybe six. Give that a save and there we go. So now it's not flush against the bottom of the page.

Let's Learn AdonisJS 6

113 Lessons

14h 15m

Introduction

Fundamentals

Building Views with EdgeJS

Database and Lucid ORM Basics

Lucid ORM Relationships

Working With Forms

Authentication & Middleware

Filtering and Paginating Queries

User Watchlist

User Profiles

Admin Panel

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.