WEBVTT 00:00.820 --> 00:06.070 So let's keep going with our pagination, and right now I'm looking at Handler's dash video and we still 00:06.070 --> 00:07.810 have a couple of hardcoded things in here. 00:07.810 --> 00:15.040 So let's fix this up in the all sales function in Handler's Dash API Duco, we don't want a hard code. 00:15.040 --> 00:18.790 These two things, when we call get all orders patinated. 00:19.270 --> 00:25.270 We want to put in payload page size and payload Dakara page. 00:25.990 --> 00:27.130 So that's the first thing. 00:27.310 --> 00:31.330 And down here, we don't want our current page to always be one. 00:32.050 --> 00:34.510 We want it to be payload that current page. 00:34.880 --> 00:36.410 OK, so that fixes that. 00:37.030 --> 00:44.770 Now let's go back to our old sales page and change our page so as to say five and see how that works. 00:45.850 --> 00:51.070 So it may start off, I guess maybe start. 00:54.440 --> 01:02.200 And let's go back to our Web browser and go to our all sales page, and there are five words perfect. 01:02.210 --> 01:04.220 And here's our passengers now. 01:04.220 --> 01:06.680 We want to make these buttons work or at least get closer to it. 01:06.710 --> 01:08.540 So let's go back to our old sales page. 01:09.710 --> 01:16.400 And here in the pageant function, what I'm going to do is grab everything that has the class pager. 01:16.460 --> 01:20.690 So I want to get I want to select everything from the current dorm that has the class of pager. 01:20.780 --> 01:21.540 And that's pretty simple. 01:22.520 --> 01:24.200 So we'll say let page buttons. 01:24.350 --> 01:25.370 That's just a variable name. 01:25.370 --> 01:37.380 I'm choosing equal document dot, get elements by class name and I'm looking for the class pager with 01:37.430 --> 01:37.680 an hour. 01:38.840 --> 01:46.390 So once I have them let's just look through them for and I'll use J because I've used I already for 01:46.420 --> 01:54.980 J equals zero J is less than page buttons that length J plus plus. 01:56.660 --> 02:02.660 Now every time I loop through this I want to add an event listener so I'll just say Page Button's index 02:02.660 --> 02:08.930 during the add event listener on the click event. 02:09.440 --> 02:15.230 I want to call this function and I'll look at the event, pass that to the code below. 02:16.340 --> 02:22.610 And what I want to do first is say what do they want to go to when I have that ID in the data dash page 02:22.610 --> 02:23.060 attribute. 02:23.060 --> 02:28.710 So I'll just say let the Zyad page equal target. 02:30.070 --> 02:30.490 All right. 02:32.000 --> 02:33.140 Don't get attribute. 02:34.940 --> 02:37.480 And I'm looking for data dash page. 02:38.270 --> 02:42.080 So now I know what page they want to go to and I'll just make sure this works. 02:42.350 --> 02:55.010 Console that log clicked and created a page is desired page and then I'll make a decision here if desired. 02:55.010 --> 02:57.020 Page I'll use two two brackets. 02:57.290 --> 03:06.440 Desired page is greater than zero and desired page is less than or equal to the total number of pages 03:06.440 --> 03:07.270 which has an --. 03:09.950 --> 03:19.490 Then I'll console of this console dialog would go to page desired page. 03:20.210 --> 03:27.080 OK, so if that's all typed properly and it's not because I have length spelled wrong here length. 03:27.890 --> 03:31.580 Now if that's all typed properly those buttons should at least write to the console. 03:31.590 --> 03:34.610 So let's go make stop Mixter. 03:38.340 --> 03:44.260 Go back to our Web browser, open the JavaScript terminal, reload this page. 03:44.880 --> 03:46.260 OK, so far so good. 03:46.440 --> 03:53.460 Let's click on The Less then, which shouldn't work because that's zero clicked and data dash page is 03:53.820 --> 03:54.330 perfect. 03:54.780 --> 04:02.190 Now let's try the this one to go to the next page clicked and data pages two would go to page two and 04:02.190 --> 04:07.520 let's try this one page for clicked and data dash pages for Perfect. 04:07.770 --> 04:12.960 So now we have a means of actually doing something when we click on the buttons and making sure that 04:12.960 --> 04:17.400 we do exactly what we want to navigate to the appropriate page in the list of pages.