Okay.
And now let's work on more complex pagination.
Like I said, I will set up everything in the same component.
Please reference the Readme if you need to access the previous approach, the straight up approach and
for starters will actually keep most of the things the same.
So we'll only change here where we iterating over the buttons.
So effectively we will set up a function.
In my case, I'm going to call this render page buttons and in there I'll decide based on the page number
whether I want to display the button or I want to showcase the three dots.
Now, the first thing we want to do is to set up another function.
In my case, I'm going to call this add page button.
So let's go here with const Add page.
Button.
And in here we're looking for object with two properties, page number and the active class.
So let's grab both of these things here.
And then as far as what we want to return from this function, let's scroll down and remember when we
were iterating over, we were setting up the button.
So basically just grab this code.
So take it out, navigate up.
So from add button, this is what we want to return.
And the only thing we need to change is this line of code.
So instead of page number equals to a current page, let's remove both of them.
And let's say if the active class is present, then we'll display the active one.
Then like I said, we'll have a function render page button.
So let's go here with const render page buttons.
That's going to be my function and instead of iterating over the pages.
Will actually invoke it.
So for starters, let's go with const page buttons.
So inside of the function we are creating the array, and from this function we want to return the array.
Now of course there's going to be more conditions and based on those conditions, we'll add the buttons
inside of that array.
But for now we want to go with return and then page buttons.
So now let's scroll down and essentially where we're iterating over inside of the button container,
I just want to call a render page buttons.
So let me go back to the JavaScript land and of course the S is missing.
So let me go here.
Buttons.
And if everything is correct, we should have no buttons over here because of course, we're just returning
empty array.
And effectively I chose the approach where I'm just going to have quite a few if statements and based
on the result, either I'm going to add those three dots or there's going to be actually a button.
And let's start by adding the button for the first page.
So this is something that I always want to display and therefore I'm going to go with page buttons.
Now, since this is an array I can go with Push and then inside of the push I'm going to invoke add
page button.
Now remember, what is the result that we're returning from?
Add page button?
Well, it's the actual button, right?
So here we can go with add page button.
We want to invoke it.
But then remember, we need to say what is the page number and also what's the status with the active
class?
So as far as the page number, well, it's the button for the first page.
So I'll say page number is equal to one.
And as far as the active class, well, that depends on the current page.
So let's go here with active class and let's set it equal to current page is equal to one.
So if.
The current page is equal to one.
Then of course we'll have different styles since we have over here this active class.
So now let's navigate back and check it out.
Now we have our first button.
Okay, that's an awesome start.
So now let's navigate back to our render page buttons and add the last one.
And again, the logic is going to be almost the same.
The only difference.
But of course, we'll change these values over here.
So let me copy and paste.
And yes, since we are invoking this code right after the first one, JavaScript is going to read everything
line by line.
So once we add the first one, we can also nicely right away add the last one.
Now what is going to be the page number?
Well, number of pages.
And when it comes to the active one in this case I want to go with current page equals to number of
pages.
So let's set it equal to number of pages.
You know, let me close the sidebar over here just so I have more real estate and check it out since
I over here have 32 jobs, I have four pages.
So now I nicely display the first one and the last one.
All right.
And once we have the first one and the last one, now here comes the interesting part, where we want
to set up the current page.
We want to set up one before current page and one after and also some dots in between.
Now, I will go back to all just because I want more pages to work with again.
At the moment we only have one and then since we're not displaying any more buttons, so let's navigate
over here and let's start with the current button.
So I'm going to say here current page and effectively, for starters, let's just try out this approach.
So essentially I'm going to go with page buttons Push and yes, during this video I'll be extremely
annoying, even more annoying than I'm usually am, and I will keep repeating that.
Placement is important because JavaScript is reading the code top to bottom, so please place it in
between the first one and the last one.
And the same is going to be for rest of the buttons.
Please keep the same placement, otherwise your functionality is going to go bananas.
So in here, as far as the page number, well let's go with the current page.
And remember, when it comes to the current page, we always want the current page to be active.
Correct.
So in here I'll just hard code and I'll say equal to true, let's save it.
And now let's notice something interesting.
So I have two buttons that display.
Number one, Why?
Well, because I have a button already for page number one, but it comes out that the current page
is also page number one, and the same is going to be with the last page.
So.
In order to fix it, we'll actually place this one in the condition.
So how is that going to look like?
I'll say if the current page is not equal to one and if the current page is not equal to the number
of pages only, then add this particular button.
So essentially we just add it conditionally.
So let me move up this code.
And now once we navigate back notice, everything is fine.
So if, for example, we'll have the active page as the last one, we won't display the current one.
Now if our active one, for example, is going to be any of the pages between the first one and the
last one, then of course everything is going to be correct.
Hopefully that is clear.
So now let's do the same thing with one before and one after And before we write any code, I just want
to repeat one more time.
This is totally up to you.
I chose the approach where I set up one before and one after.
You don't have to if you just want to display the dots.
That's totally reasonable approach.
Now, as far as the one before and one after, we'll also have some conditions.
So one before what conditions we're going to use.
Well, here I'm going to go if and then current page is not equal to one.
So pretty much same deal if it's equal to one that I don't want to display one before because there's
really no need.
And also I don't want to display this button if the current page is equal to two.
So let me add over here and operator, we're going to go with current page is not equal to two.
And then we want to grab the page buttons.
Probably we can copy and paste.
Next time.
And then when it comes to the page number, we want to go over here, current page minus one because
this will be one before current page.
And when it comes to active class, it will always be false over here.
So now let's navigate back over here and notice.
In this case I am displaying four.
However, if I'm going to go all the way down to page number two, I'm not displaying anymore this button.
So at the moment I have only the first one, the current one, and of course the last one.
So now let's do the same thing with one after.
And you can probably already guess that we'll have some conditions there as well.
So let me copy this one again, placement is important.
If this is the current page, please place it right after the current page.
And when it comes to conditions, the logic is almost the same.
But now we're looking to the end of array.
Basically, we're looking for the number of pages.
So here I'll say if the current page is not equal to number of pages, basically it's not the last one
and it's also not the one before last one.
Hopefully that makes sense.
So we're looking for not equals to and we want to go with number of pages minus one.
Now as far as these values is going to be current page.
Plus one.
And again, active class is going to stay false.
Now, you know what?
I think I need to add some comments over here.
So first page.
Then I'll say one before current page and then let's grab the comment here.
We'll say one after current page.
Let's save it.
Let's navigate.
And it looks like there's some kind of bug.
Nope, everything is correct.
That was probably just some kind of glitch.
So now let's navigate notice once I get to the page number three, I'll have two and four.
And pretty much that continues all the way up to the eight.
And then once we get to nine, then of course, I'm not displaying the page that's coming after the
current page because I mean I already have the last one.
Hopefully that is clear.
And then lastly, we want to add those dots.
And when it comes to dots in my setup, I'm going to add them before this setup where we have these
three buttons and I'm also going to add them after those three buttons.
But again, we're going to use some conditions.
Notice if the current page is four, then I have three and five correct.
However, if my current page is three, I already have two and I also have one.
So there's really no point to place the dots over here.
Now we will still set up dots one after the current page, but not the one before.
I know that this naming might seem a little bit confusing, so just bear with me.
Let's navigate here again.
Placement is extremely important and we want to set up the condition.
And also note I'm going to go here with dots.
So as far as the condition, like I said, we're going to only add them if the current page is more
than three because like you just saw, there's really no point if it's not the case.
Now, in this case, let's just hard code.
So essentially, I'm not going to set up a separate function for that.
I'm just going to go with page buttons, push.
Then inside of it we want to add the span.
So let me set up the element over here.
Let's add some classes.
We're looking for page hyphen BTN.
Something we're going to style, of course.
Then dots.
As far as the key.
Well, let's just go with dots and set it equal to one.
And then in here we'll just type some dots.
That's it.
There's really not much we need to do once we navigate back.
Notice the current page is not bigger than three.
Correct.
So of course we don't see the dots.
However, once I navigate to four now, I nicely display the dots here as well.
And the same is going to be for the dots at the end of my three active buttons, let me call them that.
Maybe that makes a little bit more sense.
Only in this case, of course, the.
Logic is going to be a little bit different.
We're going to be looking for current page is less than num of pages and again, we're looking for minus
two.
So basically, if the current page is all the way up to the end of array, we already have this button
in place, we already have the last button.
So there's really no point to display the dots as far as the values over here, this stays the same.
We just want to go here with dots and plus one.
So now let's navigate back and then notice again, this is going to be dynamic.
Basically, it's going to be based on our pages.
So once I get to the current page eight, there's really no point to showcase those dots because I have
one after and then I have the last one and the same goes if I navigate pretty much all the way down
here.
If I go all the way to three again, there's really no point to set up the dots.
And with this in place, we're done with the more complex pagination setup.