1 00:00:01,440 --> 00:00:05,580 Welcome back, ladies and gentlemen, this lecture, we will finish the search functionality by adding 2 00:00:05,580 --> 00:00:10,920 pagination, we will learn notes about the event, delegation closest method and data attributes in 3 00:00:10,930 --> 00:00:15,630 A.M. So we're going to use these data attributes when we click on the left and right Arabana. 4 00:00:15,660 --> 00:00:17,520 So now I'm going to show you what we're going to do. 5 00:00:18,630 --> 00:00:23,430 I'm going to go this is the local eighty eighty and this is the Finnish version of the project. 6 00:00:23,430 --> 00:00:32,430 So if I click here, if I if I type here oblivion, for example, and I will have 10 results, I can 7 00:00:32,430 --> 00:00:35,250 go with these left and right, Arabella's. 8 00:00:35,700 --> 00:00:38,400 But actually they are not. 9 00:00:38,640 --> 00:00:40,200 But they are not icons. 10 00:00:40,200 --> 00:00:40,950 They are buttons. 11 00:00:40,950 --> 00:00:44,220 But we have start I have style them as icons. 12 00:00:44,730 --> 00:00:46,710 That's pretty much at some clicking on a button by the way. 13 00:00:46,710 --> 00:00:47,020 Right. 14 00:00:47,400 --> 00:00:48,510 So I have ten results. 15 00:00:49,260 --> 00:00:53,290 First, I have two for results and after that I have two left. 16 00:00:53,400 --> 00:00:55,340 So four plus four equals two. 17 00:00:55,680 --> 00:01:02,460 Now, what we need to do here in the search movie, we need to first fix this display result because 18 00:01:02,460 --> 00:01:05,610 it's already been displaying the results. 19 00:01:05,610 --> 00:01:05,910 Right. 20 00:01:06,600 --> 00:01:08,990 And we need to add a couple of more parameters here. 21 00:01:09,270 --> 00:01:12,900 The second thing is we need to go to the index. 22 00:01:13,260 --> 00:01:15,600 Here it is in the movie slide or I have the buttons. 23 00:01:15,600 --> 00:01:15,900 Right. 24 00:01:16,590 --> 00:01:24,720 And what I'm going to use here, these two buttons, I need to display them inside here, inside every 25 00:01:24,720 --> 00:01:25,410 search result. 26 00:01:25,860 --> 00:01:28,440 That will be our next move in. 27 00:01:28,440 --> 00:01:32,490 Finally, we need to add event listeners here in the index. 28 00:01:33,570 --> 00:01:33,950 Right. 29 00:01:34,230 --> 00:01:39,870 So we need to add event listeners when we click on the left and right buttons to know what will happen. 30 00:01:39,870 --> 00:01:41,030 So I'm going to close this. 31 00:01:41,040 --> 00:01:42,420 We don't need it now. 32 00:01:42,420 --> 00:01:43,170 First things first. 33 00:01:43,680 --> 00:01:46,170 We need to add more parameters here and how we do this. 34 00:01:46,500 --> 00:01:56,010 So we put in our brackets, in groups in comma here and I will see page in items, items for speech. 35 00:01:56,040 --> 00:01:57,930 Now for the page. 36 00:01:57,930 --> 00:02:02,880 We always going to start from the page one in forty items per page. 37 00:02:03,300 --> 00:02:04,800 I want four items, right. 38 00:02:04,800 --> 00:02:10,920 Because even if even if we click on our version, I do have four items. 39 00:02:10,920 --> 00:02:14,250 But if I zoom out I have ten actually right in here. 40 00:02:14,250 --> 00:02:17,430 That's not the case in the Finnish version. 41 00:02:17,430 --> 00:02:19,560 So we need to find a way how we can do this. 42 00:02:20,050 --> 00:02:28,350 OK, now I this can be hard coded, but we're going to just make it not to be. 43 00:02:28,350 --> 00:02:32,760 So I'm going to say constant first and that will start from zero. 44 00:02:32,940 --> 00:02:39,340 It const last, it will start from it will end up until three. 45 00:02:39,370 --> 00:02:44,430 So I'm doing this because this movie's error, it's going from zero until nine. 46 00:02:44,430 --> 00:02:46,650 So we have ten elements in this area. 47 00:02:46,650 --> 00:02:51,540 But the area, they are index based and they start from the zero. 48 00:02:51,540 --> 00:02:51,920 Right. 49 00:02:52,260 --> 00:02:53,790 So this is actually here. 50 00:02:53,790 --> 00:02:58,410 We need to find a way how we get started from here from zero, not actually from the first page. 51 00:02:58,980 --> 00:03:05,330 And we need to go until four, but actually four minus one will be three until the last element. 52 00:03:06,150 --> 00:03:09,600 OK, so how are we going to do it now? 53 00:03:09,630 --> 00:03:13,260 We need to find easy solution so I can see Page. 54 00:03:15,920 --> 00:03:20,330 Minus one times items per page. 55 00:03:22,050 --> 00:03:27,930 Now, what this will do is going to be zero for the first time, one minus one zero zero multiplied 56 00:03:27,930 --> 00:03:29,600 by anything will give you a zero. 57 00:03:29,610 --> 00:03:33,750 So it will start from zero and it will go to the third three elements. 58 00:03:33,780 --> 00:03:35,190 Zero, one, two, three. 59 00:03:35,200 --> 00:03:37,340 Actually, it will bring out the four elements. 60 00:03:38,370 --> 00:03:45,240 If I have page two, it will go to the page two minus one, one times four. 61 00:03:45,450 --> 00:03:49,960 So it will start from the fourth element in how many elements I have. 62 00:03:50,190 --> 00:03:53,880 I have three more, four, five, six and seven. 63 00:03:54,090 --> 00:03:55,830 So it will go to the seventh element. 64 00:03:55,950 --> 00:03:56,300 Right. 65 00:03:56,730 --> 00:04:04,490 But we need to only just change this one and it will be page times items per page. 66 00:04:04,770 --> 00:04:12,120 So this is what we need to do to add as a final and that is pretty much just make a space here. 67 00:04:12,540 --> 00:04:14,160 Looks not natural. 68 00:04:15,450 --> 00:04:17,430 OK, so we've done this one by one. 69 00:04:17,490 --> 00:04:24,720 Why have this, because this movie, there is an entire area of the results starting from the zero actually 70 00:04:24,720 --> 00:04:25,560 nine results. 71 00:04:25,890 --> 00:04:27,590 If you count the zero, it will be ten. 72 00:04:28,230 --> 00:04:35,040 But what we can do here, we can use the slice method in the slice method takes two arguments, the 73 00:04:35,040 --> 00:04:36,510 first in the last. 74 00:04:36,660 --> 00:04:38,820 So where to start and where to stop? 75 00:04:39,390 --> 00:04:42,650 And this is what this is why we can use this to. 76 00:04:43,230 --> 00:04:45,360 And now, ladies and gentlemen, this will work. 77 00:04:45,900 --> 00:04:50,580 So I'm going to show you first, I'm going to type here oblivion again. 78 00:04:51,060 --> 00:04:52,170 Actually, I don't have to. 79 00:04:52,470 --> 00:04:53,940 We have it now. 80 00:04:53,940 --> 00:04:55,310 Look at here this result. 81 00:04:55,320 --> 00:05:01,560 And if I go here oblivion, it will give me the same same result because I'm on the first page. 82 00:05:01,860 --> 00:05:04,470 But what if I physically change this one to two? 83 00:05:05,490 --> 00:05:08,370 Now, this will be lost, but I'll go again. 84 00:05:08,370 --> 00:05:15,150 Oblivion and I have the second set of results actually the next four. 85 00:05:15,240 --> 00:05:17,490 Here it is next for next four. 86 00:05:17,490 --> 00:05:19,920 I'm going from one to another one. 87 00:05:20,130 --> 00:05:20,520 All right. 88 00:05:20,670 --> 00:05:21,720 So I have this one. 89 00:05:21,930 --> 00:05:28,470 And if I change to page three here, the remaining two will be there. 90 00:05:28,740 --> 00:05:34,900 But I need to type it again because this is the def server that is constantly refreshing. 91 00:05:34,970 --> 00:05:37,160 OK, that's pretty much done here. 92 00:05:37,530 --> 00:05:41,130 Now we need to find a way this is working. 93 00:05:41,130 --> 00:05:46,220 We need to find a way, how we can how we can create these buttons here. 94 00:05:46,230 --> 00:05:46,580 Right. 95 00:05:46,920 --> 00:05:53,820 So I'm going to copy these buttons here and we're going to create const function again. 96 00:05:53,820 --> 00:05:57,300 So I'm going to create again another function and we're going to do the same thing here. 97 00:05:57,300 --> 00:05:58,200 Display movie. 98 00:05:58,200 --> 00:06:00,400 We declare it outside here. 99 00:06:00,400 --> 00:06:03,090 Are we going to use the buttons function again? 100 00:06:03,090 --> 00:06:08,130 I'm going to declare it outside so this will not be exported function. 101 00:06:08,130 --> 00:06:08,400 Right. 102 00:06:08,580 --> 00:06:13,530 So we just gonna we're not going to export this function. 103 00:06:13,530 --> 00:06:24,630 So I'm going to say erro b10 and this function will take one parameter here and you will see what in 104 00:06:24,630 --> 00:06:25,380 the short. 105 00:06:25,770 --> 00:06:29,250 Now this parameter will be the page actually of the page. 106 00:06:29,250 --> 00:06:29,580 No. 107 00:06:29,580 --> 00:06:29,820 Right. 108 00:06:29,950 --> 00:06:38,100 So the current page in we can go one page left one page, one page, one page down, one page up. 109 00:06:38,730 --> 00:06:41,010 So you're going to see what I'm trying to say. 110 00:06:41,010 --> 00:06:47,220 I'm going to create constant here for the markup and I'm going to see Arrow wheaty. 111 00:06:47,310 --> 00:06:54,330 And so I'm going to ask Beaton's because I'm going to put the both here and template literals right 112 00:06:54,510 --> 00:06:56,310 makerspace like this here. 113 00:06:56,310 --> 00:06:59,790 And I'm going to past based the one that I have in the movie. 114 00:06:59,790 --> 00:07:00,510 Slide it right. 115 00:07:00,630 --> 00:07:03,180 So go to the movies library and copy this. 116 00:07:03,180 --> 00:07:04,020 Find this path. 117 00:07:04,440 --> 00:07:07,200 Now, I'm going to start with the right button. 118 00:07:07,200 --> 00:07:16,500 I'm going to cut this one and let's make let's make a better one here like that. 119 00:07:16,680 --> 00:07:21,270 So I'm just going to shift everything to the left first and like this. 120 00:07:21,270 --> 00:07:24,900 Now I want this to look more natural. 121 00:07:25,800 --> 00:07:28,230 So now I will know that I have two buttons here. 122 00:07:28,260 --> 00:07:28,620 Right. 123 00:07:29,010 --> 00:07:32,130 And this one goes to show I have two buttons. 124 00:07:32,130 --> 00:07:34,050 And inside the button I have the icon. 125 00:07:34,260 --> 00:07:36,960 In this button we do have class aerobically. 126 00:07:36,960 --> 00:07:41,160 And now I want to add that data attribute that I mentioned in before. 127 00:07:41,310 --> 00:07:46,680 So these data that go to it will be the actual page number. 128 00:07:46,950 --> 00:07:47,730 So page. 129 00:07:49,110 --> 00:07:54,960 So because we are going to the right side, it will be page this current page number here plus one. 130 00:07:55,470 --> 00:08:00,150 And if we're going to the left side, it will be the same, but with the minus. 131 00:08:00,900 --> 00:08:01,290 Right. 132 00:08:01,440 --> 00:08:03,000 So that is pretty much it. 133 00:08:03,000 --> 00:08:14,160 Now what we need to do is to use that selectors sorry to use that class names that movie Slider, because 134 00:08:14,160 --> 00:08:20,640 here we are going to open this movie slider, the same as we did with the we the particular movie. 135 00:08:20,790 --> 00:08:21,120 Right. 136 00:08:21,360 --> 00:08:24,570 You just append know what we can do here. 137 00:08:24,780 --> 00:08:36,750 I'm going to say document that movie slider and insert adjacent HTML and I'm going to insert this one 138 00:08:36,930 --> 00:08:42,180 as before and and I'm just going to get this one. 139 00:08:43,860 --> 00:08:52,110 OK, now that's all nice and dandy, but we need to just check if I have you in the selectors. 140 00:08:54,230 --> 00:09:03,140 Class Electra's, I do have movies, lighter, movies, lighter again now here I saw something that 141 00:09:03,140 --> 00:09:04,220 we can just change it. 142 00:09:04,580 --> 00:09:06,620 So do we have this class names? 143 00:09:06,620 --> 00:09:07,130 Here it is. 144 00:09:07,700 --> 00:09:13,530 So we can change this one two class names that movies, movies, lighter. 145 00:09:13,730 --> 00:09:14,070 Right. 146 00:09:14,240 --> 00:09:20,140 So because we are using the exact same thing now, everybody is done. 147 00:09:20,420 --> 00:09:23,830 So actually well these last we need to call it from this function. 148 00:09:24,080 --> 00:09:30,020 So we're going to come from this function using the Arrow Beaky in class in here. 149 00:09:30,020 --> 00:09:36,260 I'm going to pass in the page that they each will come from here right in because I mentioned it. 150 00:09:36,260 --> 00:09:40,870 Let's go back to one see past the page there. 151 00:09:41,150 --> 00:09:45,590 So this page where regardless of the number, it will be passed here. 152 00:09:45,590 --> 00:09:48,020 And if we go to the right, it will be added one. 153 00:09:48,110 --> 00:09:50,950 If we go to the left side, it should be minus one. 154 00:09:51,230 --> 00:09:54,200 Luckily, I saw this right now. 155 00:09:55,280 --> 00:09:57,640 This is it for the search movie. 156 00:09:57,650 --> 00:10:00,830 View what I need to go here. 157 00:10:00,860 --> 00:10:03,230 I need to go back to the index. 158 00:10:03,620 --> 00:10:11,810 And here I'm going to add the event listener so it will be on click and make sure that you do like something 159 00:10:11,810 --> 00:10:12,080 like that. 160 00:10:12,110 --> 00:10:17,840 So make sure that you have you have common here and this will be the section for the event 161 00:10:20,540 --> 00:10:22,610 listeners in here. 162 00:10:22,610 --> 00:10:27,320 I have the form submit that was this one. 163 00:10:27,320 --> 00:10:29,600 Right, because this is the listener. 164 00:10:29,780 --> 00:10:34,460 The second thing that I will have will be the hero will be in the left. 165 00:10:35,390 --> 00:10:41,450 And right now, if I don't do much comments, please do do more comments than me, because that will 166 00:10:41,450 --> 00:10:42,590 make your life easier. 167 00:10:42,800 --> 00:10:49,970 So from now on, I will push the buttons here and I have the you have the controllers here, right? 168 00:10:50,120 --> 00:10:52,160 We have only only one controller so far. 169 00:10:52,430 --> 00:10:56,810 Now, here I'm going to add event listener. 170 00:10:59,390 --> 00:10:59,810 Oops. 171 00:11:00,740 --> 00:11:02,870 On movie Slider. 172 00:11:03,110 --> 00:11:09,320 Arrow left and right, arrow obedience. 173 00:11:09,470 --> 00:11:09,950 Nice. 174 00:11:10,640 --> 00:11:13,640 So I'm going to use again the class name. 175 00:11:14,000 --> 00:11:19,400 Now this is the exact place that we need to use the event delegation. 176 00:11:19,400 --> 00:11:19,700 What. 177 00:11:20,330 --> 00:11:21,800 So I'm going to show you right now. 178 00:11:21,800 --> 00:11:23,780 So here we don't have the movie. 179 00:11:23,780 --> 00:11:24,920 Slider is not there. 180 00:11:25,130 --> 00:11:29,150 This class here, it's not alive. 181 00:11:29,330 --> 00:11:31,850 So we have only this class, but we don't have the movie. 182 00:11:31,850 --> 00:11:32,870 We don't have the buttons. 183 00:11:33,230 --> 00:11:35,060 So we can't target anything else. 184 00:11:35,900 --> 00:11:41,090 And we need to find the parent element so we can use that event delegation. 185 00:11:41,090 --> 00:11:41,450 Right. 186 00:11:42,260 --> 00:11:44,180 And to stop the event. 187 00:11:44,180 --> 00:11:47,630 BUBLEY Now we need to target this movie. 188 00:11:47,630 --> 00:11:49,250 Slider, where are we going to put the event? 189 00:11:49,250 --> 00:11:54,710 Listener on CLICK So here we are going to listen for Click because we don't have anything else here 190 00:11:54,710 --> 00:12:01,070 that we can click on because because this will be the first and it will say OK, in the index it will 191 00:12:01,070 --> 00:12:05,990 say OK, I are trying to click listen for events here, but they are not there actually. 192 00:12:06,140 --> 00:12:07,610 So what is happening? 193 00:12:07,760 --> 00:12:11,720 That's why this movie Slider is dear and we can use it now. 194 00:12:12,530 --> 00:12:13,850 That's called evangelisation. 195 00:12:13,850 --> 00:12:17,180 Class names, dot movie slider. 196 00:12:17,480 --> 00:12:23,330 They add event listener and it will be on click here. 197 00:12:23,330 --> 00:12:27,170 I'm going to pass the event right now. 198 00:12:27,170 --> 00:12:34,880 This event, we will use it because I can use the console like the target on this, see the target. 199 00:12:36,050 --> 00:12:41,810 So we passing this event to this error function in this error function will help us to determine the 200 00:12:41,810 --> 00:12:42,170 target. 201 00:12:42,470 --> 00:12:47,300 OK, now let's see if we first when we load the oblivion, 202 00:12:50,480 --> 00:12:54,440 Le'Veon and we will see if we have the arrows. 203 00:12:55,640 --> 00:12:57,290 Actually, we don't have the arrows. 204 00:12:57,830 --> 00:12:58,700 What's happening here? 205 00:13:00,160 --> 00:13:01,160 Do we have some error? 206 00:13:01,190 --> 00:13:01,760 Let's see. 207 00:13:05,680 --> 00:13:14,870 No, actually, we don't have errors of Le'Veon and we don't have the buttons, what is happening? 208 00:13:15,670 --> 00:13:17,080 Oh, let me check. 209 00:13:19,100 --> 00:13:28,460 OK, let's go back to the to the search for you here and here, I can see that we have a problem. 210 00:13:28,670 --> 00:13:37,190 The one problem that we have is a search adjacent element instead of insert adjacent HTML right now. 211 00:13:37,190 --> 00:13:40,130 Let's see, change that one. 212 00:13:40,280 --> 00:13:40,940 And here it is. 213 00:13:40,940 --> 00:13:41,810 The buttons are there. 214 00:13:42,350 --> 00:13:44,750 Inspect the element if you go to the car. 215 00:13:45,020 --> 00:13:46,670 Sorry if you don't go to this one. 216 00:13:46,910 --> 00:13:47,360 Here it is. 217 00:13:47,390 --> 00:13:50,270 The two of the buttons are added at the end. 218 00:13:51,740 --> 00:13:53,530 Right here is the two of the buttons. 219 00:13:53,870 --> 00:14:01,580 Now, we need to actually just to see if we have output. 220 00:14:01,730 --> 00:14:08,390 So if you click here on this one, it will you say use it will give actually the ICCA inseam on this 221 00:14:08,390 --> 00:14:08,640 one. 222 00:14:08,870 --> 00:14:12,860 So here a click on some other places and it gave me the SVG. 223 00:14:13,130 --> 00:14:17,550 But if I click outside a little bit more here, it will give me a button. 224 00:14:17,720 --> 00:14:21,790 So now we have a problem here, a problem we need to solve. 225 00:14:21,980 --> 00:14:24,740 So I need to grab this button class. 226 00:14:25,310 --> 00:14:27,120 I don't need this SWG. 227 00:14:27,140 --> 00:14:28,830 I go to work wherever it is. 228 00:14:29,150 --> 00:14:31,950 So how I can it, how I can achieve that. 229 00:14:32,300 --> 00:14:34,670 So for the first time we're going to use something here. 230 00:14:34,880 --> 00:14:36,530 It's called closest. 231 00:14:36,800 --> 00:14:37,190 Right. 232 00:14:37,520 --> 00:14:39,190 And this closest. 233 00:14:39,890 --> 00:14:42,800 So I'm going to explain you what it will do. 234 00:14:42,800 --> 00:14:47,900 The closest method will return the closest ancestor of the current element with matches the selector 235 00:14:47,900 --> 00:14:49,380 given in the parameter. 236 00:14:49,490 --> 00:14:56,090 So here I'm going to create a comp const name slider. 237 00:14:57,140 --> 00:14:58,280 Oops, what happened. 238 00:14:59,690 --> 00:15:03,950 Slider meeting like that. 239 00:15:04,700 --> 00:15:06,520 And let me just comment this one out. 240 00:15:06,830 --> 00:15:09,860 So const slider median in here. 241 00:15:09,980 --> 00:15:12,860 I will say event dot target. 242 00:15:15,020 --> 00:15:16,650 Actually it's either target. 243 00:15:17,090 --> 00:15:19,490 Now if you use here event use the event here. 244 00:15:19,610 --> 00:15:22,700 So either Target and I will see the closest. 245 00:15:24,830 --> 00:15:33,470 But here, I will need to pass this class arrabbiata so we do have equity and for these two buttons, 246 00:15:33,470 --> 00:15:33,750 right. 247 00:15:33,820 --> 00:15:39,020 I'm going to copy this one is not here, so I need to use it like this. 248 00:15:39,260 --> 00:15:42,920 You know, let's console lock the slider here. 249 00:15:45,920 --> 00:15:50,270 And I know I know we have to type it every time. 250 00:15:50,270 --> 00:15:50,780 So here it is. 251 00:15:50,780 --> 00:15:53,080 I got the class every time I click. 252 00:15:53,090 --> 00:15:56,270 So it doesn't matter where I click, I'm going to get these. 253 00:15:56,270 --> 00:15:57,140 So I click here. 254 00:15:57,150 --> 00:15:57,870 That's why it's not. 255 00:15:58,050 --> 00:16:02,450 So every time I click actually doesn't matter where on the button. 256 00:16:02,810 --> 00:16:07,850 If it's on the icon or the Smeg, it will give me this one right in here. 257 00:16:07,850 --> 00:16:10,420 It will say data go to zero in here. 258 00:16:10,460 --> 00:16:11,960 Data go to the second page. 259 00:16:12,270 --> 00:16:12,670 Right. 260 00:16:13,010 --> 00:16:13,460 Nice. 261 00:16:13,820 --> 00:16:17,770 So let's find out how many pages we have. 262 00:16:17,780 --> 00:16:18,910 That's the number of the page. 263 00:16:18,910 --> 00:16:21,890 So I'm going to comment this one out so you can keep as a record. 264 00:16:22,130 --> 00:16:28,790 We don't need this actually now to find the number of the page number of pages. 265 00:16:29,030 --> 00:16:32,090 So we need to use the math method here. 266 00:16:32,240 --> 00:16:37,410 So I'm going to say const pages and how are we going to find how many pages we need? 267 00:16:37,580 --> 00:16:39,020 So I'm going to say math here. 268 00:16:40,340 --> 00:16:42,680 I'm going to use the math that SEELE. 269 00:16:44,670 --> 00:16:53,310 Now, we haven't used the seal, but this will return just a week later, the church movies, I need 270 00:16:53,310 --> 00:16:54,300 to find everything. 271 00:16:54,690 --> 00:17:02,340 So data, the surge, the movies that link it will give me it will give me the length of the sum of 272 00:17:02,340 --> 00:17:06,890 the entire movies are great because they are stored in the data search movies, right? 273 00:17:08,180 --> 00:17:19,270 It is data search and we have data search movies now that will give me the number 10 and this matosi 274 00:17:19,290 --> 00:17:22,730 of what it will do, for example, if it's three point three. 275 00:17:23,730 --> 00:17:29,240 So the result is three point three, it will round it back to four. 276 00:17:29,790 --> 00:17:30,960 So do the higher one. 277 00:17:31,200 --> 00:17:31,530 Right. 278 00:17:31,710 --> 00:17:37,000 Even if it's three point seven, again, people around it back to four. 279 00:17:37,810 --> 00:17:39,440 Do you understand what I'm trying to do? 280 00:17:39,510 --> 00:17:40,980 I'm not going to use round here. 281 00:17:41,160 --> 00:17:44,580 I'm going to use Cele because it's going to give us the bigger number every time. 282 00:17:44,730 --> 00:17:48,490 Even if we three point one, that's pretty much what I need. 283 00:17:48,900 --> 00:17:56,100 And now let's console lock the pages now. 284 00:17:56,880 --> 00:17:57,920 Let's see what's happening. 285 00:17:58,050 --> 00:18:02,430 If I go to oblivion here again in a misspell it. 286 00:18:05,690 --> 00:18:08,260 So if I click here, I will have 10, right? 287 00:18:08,630 --> 00:18:12,480 That's the number of the pages, but we got the entire number. 288 00:18:12,510 --> 00:18:18,040 So what I want is to divide it by the number of four here because I have four results on each page. 289 00:18:18,170 --> 00:18:20,030 So that should give me something else. 290 00:18:21,950 --> 00:18:22,280 What else? 291 00:18:22,280 --> 00:18:24,060 We need to hear oblivion. 292 00:18:25,330 --> 00:18:25,470 Here. 293 00:18:25,730 --> 00:18:28,700 So if I click anywhere, it will give me three. 294 00:18:28,700 --> 00:18:29,090 Right. 295 00:18:29,510 --> 00:18:32,230 Because otherwise it will give me 2.5. 296 00:18:32,390 --> 00:18:33,330 So I want three. 297 00:18:33,800 --> 00:18:35,450 So I want to have three pages. 298 00:18:36,830 --> 00:18:38,630 That's pretty much it. 299 00:18:38,720 --> 00:18:42,760 Now we have the pages we have actually we don't need it. 300 00:18:42,770 --> 00:18:47,150 I don't want to look bad here so you can keep it for your own good. 301 00:18:47,480 --> 00:18:51,780 Now we have this like and we target we target the closest one. 302 00:18:52,100 --> 00:18:56,830 So this will get the always get the beat the button. 303 00:18:57,380 --> 00:19:02,560 We have the number of pages based on the array length and we divide it by four. 304 00:19:02,570 --> 00:19:02,870 Why. 305 00:19:02,870 --> 00:19:07,150 Because we want to have four elements on the page in now. 306 00:19:07,460 --> 00:19:14,040 So what we need to check if this slider median is true. 307 00:19:14,060 --> 00:19:20,180 So if we find a slider median, then we need to grab first the data set attribute. 308 00:19:20,510 --> 00:19:24,410 Now what I'm going to say here, const page number. 309 00:19:25,000 --> 00:19:30,160 Remember that we had to is this data set data to go. 310 00:19:30,320 --> 00:19:31,880 That's called data set achievement. 311 00:19:31,910 --> 00:19:40,910 So what I'm going to say page number equal to pass it, because we need to parse this one into slider, 312 00:19:40,910 --> 00:19:46,880 meta and data set to go go to sorry. 313 00:19:48,770 --> 00:19:50,540 And that is pretty much it. 314 00:19:50,900 --> 00:19:58,160 Now let's cons along the page number page numbers to see if that will work. 315 00:19:58,670 --> 00:20:00,470 So again, oblivion. 316 00:20:06,290 --> 00:20:07,370 So if I click here. 317 00:20:10,410 --> 00:20:11,190 Did I save it? 318 00:20:12,480 --> 00:20:13,050 What happened? 319 00:20:14,400 --> 00:20:15,030 Nothing. 320 00:20:17,260 --> 00:20:23,810 OK, I found my problem and the problem is with this pass it so it's not spelled right. 321 00:20:23,830 --> 00:20:28,660 So should we pass it like that now? 322 00:20:28,660 --> 00:20:31,860 Control of the page number here just to see what's happening. 323 00:20:32,620 --> 00:20:33,520 Oblivion. 324 00:20:36,250 --> 00:20:38,620 And it should give me some result here, too. 325 00:20:38,620 --> 00:20:40,810 And if you click on, it will go to the zero sum. 326 00:20:40,810 --> 00:20:42,590 Grabbing this here, by the way. 327 00:20:43,210 --> 00:20:43,660 Sorry. 328 00:20:43,960 --> 00:20:45,260 This one data go to. 329 00:20:45,520 --> 00:20:50,140 So that is how we can use the data set in order to get where we want to go. 330 00:20:50,530 --> 00:20:51,940 Pretty much simple. 331 00:20:52,060 --> 00:20:54,200 And I messed it up here a little bit. 332 00:20:54,220 --> 00:20:55,060 Sorry about this, guys. 333 00:20:55,120 --> 00:20:56,170 I have to stop the video. 334 00:20:56,180 --> 00:20:58,740 I don't want to rerecord it, and that's pretty much it. 335 00:20:58,750 --> 00:21:05,170 So change this one and you get to go and make sure that you are getting the results right now. 336 00:21:05,740 --> 00:21:10,060 What we need to do even so here, page number. 337 00:21:10,270 --> 00:21:13,540 So what I want to see if the beach number is different than zero. 338 00:21:14,020 --> 00:21:14,340 Right. 339 00:21:14,350 --> 00:21:17,470 Any the page number is smaller than the pages here. 340 00:21:18,280 --> 00:21:20,260 Then I want to do something. 341 00:21:20,590 --> 00:21:22,510 OK, let's do this again. 342 00:21:22,510 --> 00:21:26,800 If page number, it's different than zero. 343 00:21:27,730 --> 00:21:30,670 Remember when we click on the right on the left side equals zero. 344 00:21:30,670 --> 00:21:31,720 So we don't we don't. 345 00:21:31,720 --> 00:21:32,860 We want to avoid that. 346 00:21:32,860 --> 00:21:41,170 We don't want to go to the minus one in page number should be smaller or equal to the pages here. 347 00:21:41,560 --> 00:21:43,810 Remember we had three pages cuz. 348 00:21:44,620 --> 00:21:45,220 No. 349 00:21:46,330 --> 00:21:51,650 So this this condition must be both met with end, right? 350 00:21:52,150 --> 00:21:56,790 No, here I'm going to say search movies review. 351 00:21:58,180 --> 00:22:03,640 First, I want to reset movie slider because I want to go to the next page. 352 00:22:03,760 --> 00:22:05,410 I don't want to see this here. 353 00:22:05,560 --> 00:22:09,630 I just want this to be gone in next for to be available. 354 00:22:09,850 --> 00:22:16,660 That's why I'm going to say the rest of the movie Slider first in here, I will say search movies, 355 00:22:16,930 --> 00:22:20,170 movie view, dot display results. 356 00:22:20,410 --> 00:22:24,760 But remember here we passed only the data that search movies. 357 00:22:24,760 --> 00:22:25,070 Right. 358 00:22:25,300 --> 00:22:26,680 So we need that one. 359 00:22:30,010 --> 00:22:33,820 And plus, we change it back, where was it? 360 00:22:36,690 --> 00:22:46,940 OK, we changed this one to two 1/2 pages and items were made so we can declare here the page number 361 00:22:47,220 --> 00:22:52,830 right now, the page number will come from here in the page number. 362 00:22:52,860 --> 00:22:54,170 OK, it will go there. 363 00:22:54,600 --> 00:22:55,010 Boom. 364 00:22:55,200 --> 00:22:56,620 So we will know which page. 365 00:22:56,640 --> 00:23:01,710 So this one, it can change to two or it can change to another page. 366 00:23:01,860 --> 00:23:03,330 OK, let's see. 367 00:23:04,920 --> 00:23:05,720 Oblivion. 368 00:23:07,890 --> 00:23:09,380 So I have this one. 369 00:23:09,390 --> 00:23:13,110 So if I click on the right, here it is it give me the second one. 370 00:23:13,380 --> 00:23:15,960 If I click on the next one, it will give me that. 371 00:23:15,990 --> 00:23:21,850 So if I go here, it will not go on the other side and it will not go because of this condition. 372 00:23:23,370 --> 00:23:30,210 Sorry about index because of this condition here, page number should not should be different than zero 373 00:23:30,210 --> 00:23:33,490 page numbers should be smaller than pages and in our case is three. 374 00:23:33,960 --> 00:23:35,800 So first that we set this one. 375 00:23:36,720 --> 00:23:39,140 So if I don't do this, look what will happen. 376 00:23:41,990 --> 00:23:49,430 I will enter, and if I do this, if it is, they're going on the right side, so if I click one more, 377 00:23:49,670 --> 00:23:51,020 I will have the ten results. 378 00:23:51,230 --> 00:23:53,800 So if I go back here, it's going to work, right. 379 00:23:54,020 --> 00:23:59,280 That's why I need to reset the movies every time and then after to display the results. 380 00:23:59,300 --> 00:24:01,800 That's why we changed this one dysfunction here. 381 00:24:01,830 --> 00:24:06,250 Sorry, we changed to page number one and items per page. 382 00:24:06,260 --> 00:24:09,470 Actually, that is pretty much it for this lecture. 383 00:24:09,710 --> 00:24:16,700 This was super long lecture, but I hope you understand how we render these buttons, how we change 384 00:24:16,700 --> 00:24:17,570 these pages. 385 00:24:17,690 --> 00:24:19,610 So we had the first in the last page. 386 00:24:19,730 --> 00:24:20,950 We use the slice method. 387 00:24:20,960 --> 00:24:21,380 Why? 388 00:24:21,380 --> 00:24:24,890 Because we don't want to use the entire area at once. 389 00:24:25,280 --> 00:24:28,040 And after that, we use the speech here. 390 00:24:28,520 --> 00:24:30,640 And actually I move that one a little bit down. 391 00:24:30,800 --> 00:24:33,830 So this actually you have it on top here, right? 392 00:24:36,060 --> 00:24:37,350 So at this point, should be here. 393 00:24:38,370 --> 00:24:46,070 So here we use that beach and we go to go to page that data set that we used in our listener here, 394 00:24:46,470 --> 00:24:48,120 that is pretty much it now. 395 00:24:48,120 --> 00:24:53,820 You know, also how to use the target to closest to every time to find the button that you are looking 396 00:24:53,820 --> 00:24:59,640 for or the element that you're looking for, because this one, the closest method will return the closest 397 00:24:59,670 --> 00:25:04,770 ancestor of the current element, which matches the selector given in the parameter. 398 00:25:05,430 --> 00:25:06,480 That is pretty much it. 399 00:25:06,630 --> 00:25:09,000 So I hope you enjoyed this one and I will see you in the next one.