WEBVTT 00:01.090 --> 00:02.720 So we're nearly there with our janitor. 00:03.040 --> 00:06.370 We have our HTML displaying the buttons properly here. 00:06.370 --> 00:10.840 We appear to have listeners attached to all of them, and there's just a few more changes to make before 00:10.840 --> 00:11.790 this is complete. 00:12.280 --> 00:13.360 So let's go back to our code. 00:14.860 --> 00:19.030 And the first thing I need to pay attention to is, well, right here you can see that I've set current 00:19.030 --> 00:19.930 page equal to one. 00:19.930 --> 00:22.650 That's my default and I'm showing a pagination of five. 00:22.660 --> 00:27.190 So I'll see five results per page when this pageant later fires. 00:27.670 --> 00:29.380 We draw our HTML right here. 00:29.530 --> 00:33.410 Then we get a reference to everything that has the class name of pager, which are all of our buttons. 00:33.410 --> 00:37.660 So as you can see right here, they all have the class pager and then we add an event listener. 00:37.810 --> 00:39.790 And there's a couple of things that need to change here. 00:39.970 --> 00:42.090 To start with, I need to call Updatable. 00:42.250 --> 00:45.730 We don't just want to write to the console, we want to call updatable. 00:46.660 --> 00:52.030 And the first argument that is going to be page size, which is set right up at the beginning of my 00:52.030 --> 00:54.280 script tag and mine is set to five. 00:54.640 --> 00:57.060 And then we want to go to the desired page. 00:58.540 --> 00:59.470 And that's easy enough. 00:59.950 --> 01:02.770 But there is a mistake here and it's in the IF statement. 01:02.980 --> 01:08.100 So we want to make sure that that the data ID is greater than zero because you can't go to page zero. 01:08.650 --> 01:12.390 And we also make sure that the desired page is less than or equal to pages. 01:12.400 --> 01:17.140 But this actually needs to be pages plus one because computers start counting from zero. 01:17.140 --> 01:18.570 And that was an oversight on my part. 01:19.360 --> 01:20.490 So that'll work really well. 01:21.010 --> 01:28.060 And then a little bit further down here, when I call Updatable, I'm passing adjacent payload with 01:28.060 --> 01:29.620 a page size and a page. 01:29.950 --> 01:36.100 And I need to make sure if you look at handlers thought Aprile handler Stasch API, these, as you can 01:36.100 --> 01:39.370 see right here in the all sales function, they're supposed to be INTs. 01:39.370 --> 01:41.850 And I need to make sure that they're going to be ense. 01:41.860 --> 01:42.760 And that's really easy. 01:42.850 --> 01:55.870 I'll just call parsing and based health and do the same thing here, Persse and Bastet, and that works 01:55.870 --> 01:56.320 really well. 01:56.510 --> 02:00.790 Now, the last thing I need to take care of here, again, just an oversight on my part, which seems 02:00.790 --> 02:01.660 to happen a fair bit. 02:02.140 --> 02:06.340 If you recall, a while ago I added the status column to this table. 02:06.640 --> 02:10.710 But if there's no data, we need to fix the Carlsbad, otherwise it's just not going to look right. 02:10.720 --> 02:18.090 So down here at the very end of the Fed statement, I need to change that four to a five. 02:19.030 --> 02:23.440 So let's restart our application like stop, make start. 02:27.100 --> 02:31.920 We'll go back to our webpage and see if we get everything right, so I reload this page and there are. 02:31.990 --> 02:37.510 Let's go to the next page and that works and the next page and that works. 02:37.520 --> 02:38.440 And let's go back. 02:39.160 --> 02:39.900 That works. 02:39.940 --> 02:42.760 Let's try going to page three and that works. 02:43.660 --> 02:44.360 So there you go. 02:44.380 --> 02:46.430 That's a pretty straightforward exercise. 02:46.450 --> 02:49.860 Now, there were a fair number of steps, but none of them were terribly difficult. 02:50.380 --> 02:55.870 So the next step, of course, is to do the same thing for the all subscriptions table. 02:56.320 --> 02:58.090 Now, I only have two subscriptions in there. 02:58.100 --> 03:01.860 So again, I'll have to populated with a little more data if I want this to work properly. 03:02.290 --> 03:08.770 But all you need to do is basically follow the same steps you did for the sales page, for the subscriptions 03:08.770 --> 03:09.120 page. 03:09.430 --> 03:11.940 So I'll leave that as an exercise for you. 03:12.160 --> 03:13.150 Give that a whirl. 03:13.420 --> 03:15.760 And in the next lecture, I'll show you how I did it.