WEBVTT 00:00.700 --> 00:06.220 So let's keep working on the front end and see if we can implement some kind of pagination system that 00:06.220 --> 00:09.470 allows us to go from page to page on our results. 00:09.940 --> 00:17.060 So before we go too much further, you'll notice here in all dash sales, dot page HTML in this ad event 00:17.290 --> 00:22.540 intersection, when I did find the body, I called this current page in the payload that I'm sending 00:22.540 --> 00:24.060 the handlers dash API. 00:24.100 --> 00:29.370 But if you look at handlers, dash API, actually expect that to be called page right here. 00:29.380 --> 00:30.190 So let's fix that. 00:33.910 --> 00:34.960 That should be page. 00:35.150 --> 00:42.850 OK, now the next thing I'm going to do is we're going to have navigation to jump from page to page 00:42.850 --> 00:43.740 below the table. 00:43.900 --> 00:50.380 And in order to make that happen, we're going to have to call some kind of function that refreshes 00:50.380 --> 00:51.510 the contents of our table. 00:52.000 --> 00:57.370 So maybe it makes sense to move all of this, everything inside this document. 00:57.370 --> 00:59.790 Add event listener all the way down to here. 00:59.830 --> 01:04.450 Let's cut it out of their cut and let's create a new function. 01:04.510 --> 01:13.480 And I'll put it right here and I'll call this function update table and it will take two two arguments 01:14.460 --> 01:17.020 for page size and scope for current page. 01:17.230 --> 01:20.950 And what I'll do is just paste that right in there, OK? 01:21.820 --> 01:26.040 So that means we need to make a change here when we're building our body. 01:26.050 --> 01:31.630 It's no longer page size, which is up here and it's no longer current page, which is up here. 01:31.660 --> 01:38.560 Instead is the arguments we received piece for page size and scope for current page. 01:38.890 --> 01:39.320 OK. 01:40.600 --> 01:48.040 And then down here inside or out of it, listen, all we have to do is call Updatable and give it page 01:48.040 --> 01:54.880 size, which is page size, that one defined at the very top of our script, tag and curve page. 01:57.340 --> 02:02.380 So let's make sure that works before we go too much further, which can move this over. 02:03.640 --> 02:13.330 So I'll just go stop, start and just make sure that we don't have any JavaScript errors, which I often 02:13.330 --> 02:13.620 do. 02:14.290 --> 02:19.530 So back to my Web browser and I'll go to admin all sales. 02:19.900 --> 02:25.480 And there you can see that we have Arthur Curry and Victor Stone as orders 19 and 20. 02:25.510 --> 02:27.700 And obviously there are orders before that. 02:28.870 --> 02:30.040 So we have that part working. 02:30.490 --> 02:38.590 Now, the next thing I want to do is I want to draw some kind of pagination underneath my table. 02:38.710 --> 02:41.020 So let's get that started up here. 02:41.170 --> 02:47.290 After my closing table tag, I'll use bootstraps progenitor classes and you can see those right over 02:47.290 --> 02:47.770 here. 02:48.310 --> 02:58.270 If we go to get bootstrap dotcom and we go to documentation and we look into components and we find 02:58.270 --> 02:59.110 pagination. 03:00.030 --> 03:04.820 It's right here, this is an example to draw a nice pageant like that, so we'll do something like that. 03:05.340 --> 03:13.740 So let's go back to our HTML template and I'll put in here Anan's and close the NAV and then I'll have 03:13.740 --> 03:21.780 a ULLE, which I'll give the idea of Tejinder and I'll give it a class which is required of pagination 03:23.550 --> 03:25.850 and I'll close the up and I'll just leave that empty. 03:26.700 --> 03:32.250 Now down here before my updatable, I'm going to define another function. 03:34.670 --> 03:36.890 Which I'll call pageant pagination. 03:39.610 --> 03:47.620 And it requires two arguments, pages and her page, so the number of pages and what page are we currently 03:47.620 --> 03:52.760 on and what to do first is get a reference to that page later, Ule. 03:52.810 --> 03:57.130 So let me I'll just call a P equal document. 03:57.280 --> 03:58.710 Don't get on my ID. 03:59.050 --> 04:01.600 And we're looking for Pageonce tour. 04:02.350 --> 04:04.000 That gives me a reference to the pageant. 04:04.150 --> 04:11.620 You will and I will define a variable called H2 now and I'll make it equal to using the JavaScript template. 04:11.620 --> 04:20.770 Syntax for class equals page dash item which bootstrap requires and then I'll put an attack in there 04:20.800 --> 04:24.310 a F equals one. 04:24.340 --> 04:26.890 They can go to hash bank so it doesn't do anything right now. 04:27.440 --> 04:35.620 I'll give it the class of Page Dasch link to put an equal sign on their page dash link and then I'm 04:35.620 --> 04:38.560 going to add my own class so I can get these later on. 04:38.770 --> 04:39.520 I'll just call it page. 04:41.480 --> 04:46.670 And I'm also going to put a data variable data dash, and I'll call it page equals, and here's where 04:46.670 --> 04:50.240 I'll use my JavaScript templating syntax. 04:50.760 --> 04:56.600 I'll make it per page, which I received as a parameter to this function, minus one. 04:58.670 --> 05:08.090 And then I'll close my quotes, close my aztek, or put a less than sign in there, close my A and close 05:08.090 --> 05:11.160 my ally and finally close my back. 05:12.350 --> 05:14.450 So that's what each was initially equal to. 05:15.320 --> 05:23.900 Now I just loop through the number of pages four and I'll just say, Vir, I equals zero and I want 05:23.900 --> 05:29.330 to go until I is less than or equal to pages, the number of pages we have. 05:31.480 --> 05:40.210 And I'll add one each time through and close my curly bracket and inside of here I'll say HTML plus 05:40.210 --> 05:42.460 equals and I'll just copy this and modify it. 05:44.660 --> 05:51.480 Because I want to put one entry for each page, it's available to the end user, so it's not going to 05:51.480 --> 05:54.600 be data page equals cur page minus one. 05:54.630 --> 06:02.450 It'll be I plus one for the first time through is zero and we add one to it. 06:02.460 --> 06:08.220 So the first time through it'll put one for the data page and the same thing here we'll get a plus one 06:09.300 --> 06:10.340 instead of a less than. 06:14.580 --> 06:15.450 And then finally. 06:16.540 --> 06:17.530 This copy that again. 06:19.350 --> 06:22.470 After we're finished our loop, we'll put an expert. 06:25.010 --> 06:27.520 And this will be equal to her page plus one. 06:31.130 --> 06:33.120 And we'll make this a greater than sorry. 06:36.890 --> 06:42.980 OK, so now all we have to do is call this and it should populate our pagination navigation properly. 06:43.040 --> 06:46.460 So we'll call that right after we finish updating the table. 06:46.790 --> 06:51.770 So if we have data orders, ends down here and we'll just call. 06:53.100 --> 07:02.120 Progenitor and give it as two required arguments, which in our case would be dated last page and dated 07:02.300 --> 07:03.080 current page. 07:06.080 --> 07:11.350 Now, if that works, then we should get a list of buttons that won't do anything, but at least they'll 07:11.360 --> 07:11.960 show up there. 07:12.440 --> 07:18.740 And they did last page and dated our current page, as you'll recall, come from Handler's API right 07:18.740 --> 07:19.330 down here. 07:19.390 --> 07:22.660 The response we have last page and current page. 07:23.210 --> 07:25.460 So we should have some values here if we did that properly. 07:26.750 --> 07:31.760 Now, let's make sure that we have updated our models appropriately so models to make sure there's nothing 07:31.760 --> 07:33.090 left hard coded in there. 07:33.920 --> 07:34.970 Sit down here. 07:37.130 --> 07:38.020 That looks good. 07:40.680 --> 07:41.550 That looks good. 07:41.640 --> 07:42.270 I think we're good. 07:42.450 --> 07:43.720 Let's run this and see what happens. 07:43.770 --> 07:48.090 So make stop, make start. 07:50.590 --> 07:57.070 And if all goes well, I should at least have a list of pagination navigation things at the bottom of 07:57.070 --> 08:02.770 my screen when I reload this page, let's open it up for JavaScript errors, which I often have to console. 08:02.920 --> 08:04.780 Clear that, Rila. 08:06.680 --> 08:07.710 It doesn't look good. 08:07.800 --> 08:10.860 Let's inspect this and see if at least we have some e-mail in there. 08:11.940 --> 08:13.440 So we have the table. 08:16.190 --> 08:18.380 Which would be inside of here. 08:19.560 --> 08:21.500 Roll call. 08:22.430 --> 08:23.880 Table and there's a map. 08:24.660 --> 08:27.170 I must have left something off of that, so it's empty. 08:28.940 --> 08:32.270 Let's go back here and see what I left it, I invariably do that sort of thing. 08:32.300 --> 08:34.820 I know exactly what is so what all sales page. 08:34.830 --> 08:40.040 We have this nice function and at no point do we actually populate. 08:40.620 --> 08:41.370 Are you OK? 08:42.560 --> 08:47.120 So all we have to add here, and this was a silly oversight on my part, is Peter TML. 08:50.100 --> 08:51.200 Is equal to female. 08:51.870 --> 08:56.610 All right, let's try that again, mixed up next start. 09:00.070 --> 09:03.110 And try reloading that page one more time, reload. 09:03.700 --> 09:04.430 That looks better. 09:04.450 --> 09:08.120 So now we have all these buttons and of course, you can position them wherever you want. 09:08.140 --> 09:09.520 I'm going to leave them here for right now. 09:10.780 --> 09:16.210 So when I click on this one right now, you shouldn't do anything because we can't actually go earlier 09:16.210 --> 09:17.070 than page one. 09:17.080 --> 09:19.440 And when I click, this one should take me to page two. 09:19.450 --> 09:23.230 And when I jump on a specific number, it should take me right to the appropriate page. 09:24.180 --> 09:29.070 So that's not difficult, it's just pure JavaScript coding at this point, and we'll take care of that 09:29.070 --> 09:30.060 in the next lecture.