Welcome back, ladies and gentlemen, this lecture, we will finish the search functionality by adding
pagination, we will learn notes about the event, delegation closest method and data attributes in
A.M. So we're going to use these data attributes when we click on the left and right Arabana.
So now I'm going to show you what we're going to do.
I'm going to go this is the local eighty eighty and this is the Finnish version of the project.
So if I click here, if I if I type here oblivion, for example, and I will have 10 results, I can
go with these left and right, Arabella's.
But actually they are not.
But they are not icons.
They are buttons.
But we have start I have style them as icons.
That's pretty much at some clicking on a button by the way.
Right.
So I have ten results.
First, I have two for results and after that I have two left.
So four plus four equals two.
Now, what we need to do here in the search movie, we need to first fix this display result because
it's already been displaying the results.
Right.
And we need to add a couple of more parameters here.
The second thing is we need to go to the index.
Here it is in the movie slide or I have the buttons.
Right.
And what I'm going to use here, these two buttons, I need to display them inside here, inside every
search result.
That will be our next move in.
Finally, we need to add event listeners here in the index.
Right.
So we need to add event listeners when we click on the left and right buttons to know what will happen.
So I'm going to close this.
We don't need it now.
First things first.
We need to add more parameters here and how we do this.
So we put in our brackets, in groups in comma here and I will see page in items, items for speech.
Now for the page.
We always going to start from the page one in forty items per page.
I want four items, right.
Because even if even if we click on our version, I do have four items.
But if I zoom out I have ten actually right in here.
That's not the case in the Finnish version.
So we need to find a way how we can do this.
OK, now I this can be hard coded, but we're going to just make it not to be.
So I'm going to say constant first and that will start from zero.
It const last, it will start from it will end up until three.
So I'm doing this because this movie's error, it's going from zero until nine.
So we have ten elements in this area.
But the area, they are index based and they start from the zero.
Right.
So this is actually here.
We need to find a way how we get started from here from zero, not actually from the first page.
And we need to go until four, but actually four minus one will be three until the last element.
OK, so how are we going to do it now?
We need to find easy solution so I can see Page.
Minus one times items per page.
Now, what this will do is going to be zero for the first time, one minus one zero zero multiplied
by anything will give you a zero.
So it will start from zero and it will go to the third three elements.
Zero, one, two, three.
Actually, it will bring out the four elements.
If I have page two, it will go to the page two minus one, one times four.
So it will start from the fourth element in how many elements I have.
I have three more, four, five, six and seven.
So it will go to the seventh element.
Right.
But we need to only just change this one and it will be page times items per page.
So this is what we need to do to add as a final and that is pretty much just make a space here.
Looks not natural.
OK, so we've done this one by one.
Why have this, because this movie, there is an entire area of the results starting from the zero actually
nine results.
If you count the zero, it will be ten.
But what we can do here, we can use the slice method in the slice method takes two arguments, the
first in the last.
So where to start and where to stop?
And this is what this is why we can use this to.
And now, ladies and gentlemen, this will work.
So I'm going to show you first, I'm going to type here oblivion again.
Actually, I don't have to.
We have it now.
Look at here this result.
And if I go here oblivion, it will give me the same same result because I'm on the first page.
But what if I physically change this one to two?
Now, this will be lost, but I'll go again.
Oblivion and I have the second set of results actually the next four.
Here it is next for next four.
I'm going from one to another one.
All right.
So I have this one.
And if I change to page three here, the remaining two will be there.
But I need to type it again because this is the def server that is constantly refreshing.
OK, that's pretty much done here.
Now we need to find a way this is working.
We need to find a way, how we can how we can create these buttons here.
Right.
So I'm going to copy these buttons here and we're going to create const function again.
So I'm going to create again another function and we're going to do the same thing here.
Display movie.
We declare it outside here.
Are we going to use the buttons function again?
I'm going to declare it outside so this will not be exported function.
Right.
So we just gonna we're not going to export this function.
So I'm going to say erro b10 and this function will take one parameter here and you will see what in
the short.
Now this parameter will be the page actually of the page.
No.
Right.
So the current page in we can go one page left one page, one page, one page down, one page up.
So you're going to see what I'm trying to say.
I'm going to create constant here for the markup and I'm going to see Arrow wheaty.
And so I'm going to ask Beaton's because I'm going to put the both here and template literals right
makerspace like this here.
And I'm going to past based the one that I have in the movie.
Slide it right.
So go to the movies library and copy this.
Find this path.
Now, I'm going to start with the right button.
I'm going to cut this one and let's make let's make a better one here like that.
So I'm just going to shift everything to the left first and like this.
Now I want this to look more natural.
So now I will know that I have two buttons here.
Right.
And this one goes to show I have two buttons.
And inside the button I have the icon.
In this button we do have class aerobically.
And now I want to add that data attribute that I mentioned in before.
So these data that go to it will be the actual page number.
So page.
So because we are going to the right side, it will be page this current page number here plus one.
And if we're going to the left side, it will be the same, but with the minus.
Right.
So that is pretty much it.
Now what we need to do is to use that selectors sorry to use that class names that movie Slider, because
here we are going to open this movie slider, the same as we did with the we the particular movie.
Right.
You just append know what we can do here.
I'm going to say document that movie slider and insert adjacent HTML and I'm going to insert this one
as before and and I'm just going to get this one.
OK, now that's all nice and dandy, but we need to just check if I have you in the selectors.
Class Electra's, I do have movies, lighter, movies, lighter again now here I saw something that
we can just change it.
So do we have this class names?
Here it is.
So we can change this one two class names that movies, movies, lighter.
Right.
So because we are using the exact same thing now, everybody is done.
So actually well these last we need to call it from this function.
So we're going to come from this function using the Arrow Beaky in class in here.
I'm going to pass in the page that they each will come from here right in because I mentioned it.
Let's go back to one see past the page there.
So this page where regardless of the number, it will be passed here.
And if we go to the right, it will be added one.
If we go to the left side, it should be minus one.
Luckily, I saw this right now.
This is it for the search movie.
View what I need to go here.
I need to go back to the index.
And here I'm going to add the event listener so it will be on click and make sure that you do like something
like that.
So make sure that you have you have common here and this will be the section for the event
listeners in here.
I have the form submit that was this one.
Right, because this is the listener.
The second thing that I will have will be the hero will be in the left.
And right now, if I don't do much comments, please do do more comments than me, because that will
make your life easier.
So from now on, I will push the buttons here and I have the you have the controllers here, right?
We have only only one controller so far.
Now, here I'm going to add event listener.
Oops.
On movie Slider.
Arrow left and right, arrow obedience.
Nice.
So I'm going to use again the class name.
Now this is the exact place that we need to use the event delegation.
What.
So I'm going to show you right now.
So here we don't have the movie.
Slider is not there.
This class here, it's not alive.
So we have only this class, but we don't have the movie.
We don't have the buttons.
So we can't target anything else.
And we need to find the parent element so we can use that event delegation.
Right.
And to stop the event.
BUBLEY Now we need to target this movie.
Slider, where are we going to put the event?
Listener on CLICK So here we are going to listen for Click because we don't have anything else here
that we can click on because because this will be the first and it will say OK, in the index it will
say OK, I are trying to click listen for events here, but they are not there actually.
So what is happening?
That's why this movie Slider is dear and we can use it now.
That's called evangelisation.
Class names, dot movie slider.
They add event listener and it will be on click here.
I'm going to pass the event right now.
This event, we will use it because I can use the console like the target on this, see the target.
So we passing this event to this error function in this error function will help us to determine the
target.
OK, now let's see if we first when we load the oblivion,
Le'Veon and we will see if we have the arrows.
Actually, we don't have the arrows.
What's happening here?
Do we have some error?
Let's see.
No, actually, we don't have errors of Le'Veon and we don't have the buttons, what is happening?
Oh, let me check.
OK, let's go back to the to the search for you here and here, I can see that we have a problem.
The one problem that we have is a search adjacent element instead of insert adjacent HTML right now.
Let's see, change that one.
And here it is.
The buttons are there.
Inspect the element if you go to the car.
Sorry if you don't go to this one.
Here it is.
The two of the buttons are added at the end.
Right here is the two of the buttons.
Now, we need to actually just to see if we have output.
So if you click here on this one, it will you say use it will give actually the ICCA inseam on this
one.
So here a click on some other places and it gave me the SVG.
But if I click outside a little bit more here, it will give me a button.
So now we have a problem here, a problem we need to solve.
So I need to grab this button class.
I don't need this SWG.
I go to work wherever it is.
So how I can it, how I can achieve that.
So for the first time we're going to use something here.
It's called closest.
Right.
And this closest.
So I'm going to explain you what it will do.
The closest method will return the closest ancestor of the current element with matches the selector
given in the parameter.
So here I'm going to create a comp const name slider.
Oops, what happened.
Slider meeting like that.
And let me just comment this one out.
So const slider median in here.
I will say event dot target.
Actually it's either target.
Now if you use here event use the event here.
So either Target and I will see the closest.
But here, I will need to pass this class arrabbiata so we do have equity and for these two buttons,
right.
I'm going to copy this one is not here, so I need to use it like this.
You know, let's console lock the slider here.
And I know I know we have to type it every time.
So here it is.
I got the class every time I click.
So it doesn't matter where I click, I'm going to get these.
So I click here.
That's why it's not.
So every time I click actually doesn't matter where on the button.
If it's on the icon or the Smeg, it will give me this one right in here.
It will say data go to zero in here.
Data go to the second page.
Right.
Nice.
So let's find out how many pages we have.
That's the number of the page.
So I'm going to comment this one out so you can keep as a record.
We don't need this actually now to find the number of the page number of pages.
So we need to use the math method here.
So I'm going to say const pages and how are we going to find how many pages we need?
So I'm going to say math here.
I'm going to use the math that SEELE.
Now, we haven't used the seal, but this will return just a week later, the church movies, I need
to find everything.
So data, the surge, the movies that link it will give me it will give me the length of the sum of
the entire movies are great because they are stored in the data search movies, right?
It is data search and we have data search movies now that will give me the number 10 and this matosi
of what it will do, for example, if it's three point three.
So the result is three point three, it will round it back to four.
So do the higher one.
Right.
Even if it's three point seven, again, people around it back to four.
Do you understand what I'm trying to do?
I'm not going to use round here.
I'm going to use Cele because it's going to give us the bigger number every time.
Even if we three point one, that's pretty much what I need.
And now let's console lock the pages now.
Let's see what's happening.
If I go to oblivion here again in a misspell it.
So if I click here, I will have 10, right?
That's the number of the pages, but we got the entire number.
So what I want is to divide it by the number of four here because I have four results on each page.
So that should give me something else.
What else?
We need to hear oblivion.
Here.
So if I click anywhere, it will give me three.
Right.
Because otherwise it will give me 2.5.
So I want three.
So I want to have three pages.
That's pretty much it.
Now we have the pages we have actually we don't need it.
I don't want to look bad here so you can keep it for your own good.
Now we have this like and we target we target the closest one.
So this will get the always get the beat the button.
We have the number of pages based on the array length and we divide it by four.
Why.
Because we want to have four elements on the page in now.
So what we need to check if this slider median is true.
So if we find a slider median, then we need to grab first the data set attribute.
Now what I'm going to say here, const page number.
Remember that we had to is this data set data to go.
That's called data set achievement.
So what I'm going to say page number equal to pass it, because we need to parse this one into slider,
meta and data set to go go to sorry.
And that is pretty much it.
Now let's cons along the page number page numbers to see if that will work.
So again, oblivion.
So if I click here.
Did I save it?
What happened?
Nothing.
OK, I found my problem and the problem is with this pass it so it's not spelled right.
So should we pass it like that now?
Control of the page number here just to see what's happening.
Oblivion.
And it should give me some result here, too.
And if you click on, it will go to the zero sum.
Grabbing this here, by the way.
Sorry.
This one data go to.
So that is how we can use the data set in order to get where we want to go.
Pretty much simple.
And I messed it up here a little bit.
Sorry about this, guys.
I have to stop the video.
I don't want to rerecord it, and that's pretty much it.
So change this one and you get to go and make sure that you are getting the results right now.
What we need to do even so here, page number.
So what I want to see if the beach number is different than zero.
Right.
Any the page number is smaller than the pages here.
Then I want to do something.
OK, let's do this again.
If page number, it's different than zero.
Remember when we click on the right on the left side equals zero.
So we don't we don't.
We want to avoid that.
We don't want to go to the minus one in page number should be smaller or equal to the pages here.
Remember we had three pages cuz.
No.
So this this condition must be both met with end, right?
No, here I'm going to say search movies review.
First, I want to reset movie slider because I want to go to the next page.
I don't want to see this here.
I just want this to be gone in next for to be available.
That's why I'm going to say the rest of the movie Slider first in here, I will say search movies,
movie view, dot display results.
But remember here we passed only the data that search movies.
Right.
So we need that one.
And plus, we change it back, where was it?
OK, we changed this one to two 1/2 pages and items were made so we can declare here the page number
right now, the page number will come from here in the page number.
OK, it will go there.
Boom.
So we will know which page.
So this one, it can change to two or it can change to another page.
OK, let's see.
Oblivion.
So I have this one.
So if I click on the right, here it is it give me the second one.
If I click on the next one, it will give me that.
So if I go here, it will not go on the other side and it will not go because of this condition.
Sorry about index because of this condition here, page number should not should be different than zero
page numbers should be smaller than pages and in our case is three.
So first that we set this one.
So if I don't do this, look what will happen.
I will enter, and if I do this, if it is, they're going on the right side, so if I click one more,
I will have the ten results.
So if I go back here, it's going to work, right.
That's why I need to reset the movies every time and then after to display the results.
That's why we changed this one dysfunction here.
Sorry, we changed to page number one and items per page.
Actually, that is pretty much it for this lecture.
This was super long lecture, but I hope you understand how we render these buttons, how we change
these pages.
So we had the first in the last page.
We use the slice method.
Why?
Because we don't want to use the entire area at once.
And after that, we use the speech here.
And actually I move that one a little bit down.
So this actually you have it on top here, right?
So at this point, should be here.
So here we use that beach and we go to go to page that data set that we used in our listener here,
that is pretty much it now.
You know, also how to use the target to closest to every time to find the button that you are looking
for or the element that you're looking for, because this one, the closest method will return the closest
ancestor of the current element, which matches the selector given in the parameter.
That is pretty much it.
So I hope you enjoyed this one and I will see you in the next one.