So we're nearly there with our janitor.
We have our HTML displaying the buttons properly here.
We appear to have listeners attached to all of them, and there's just a few more changes to make before
this is complete.
So let's go back to our code.
And the first thing I need to pay attention to is, well, right here you can see that I've set current
page equal to one.
That's my default and I'm showing a pagination of five.
So I'll see five results per page when this pageant later fires.
We draw our HTML right here.
Then we get a reference to everything that has the class name of pager, which are all of our buttons.
So as you can see right here, they all have the class pager and then we add an event listener.
And there's a couple of things that need to change here.
To start with, I need to call Updatable.
We don't just want to write to the console, we want to call updatable.
And the first argument that is going to be page size, which is set right up at the beginning of my
script tag and mine is set to five.
And then we want to go to the desired page.
And that's easy enough.
But there is a mistake here and it's in the IF statement.
So we want to make sure that that the data ID is greater than zero because you can't go to page zero.
And we also make sure that the desired page is less than or equal to pages.
But this actually needs to be pages plus one because computers start counting from zero.
And that was an oversight on my part.
So that'll work really well.
And then a little bit further down here, when I call Updatable, I'm passing adjacent payload with
a page size and a page.
And I need to make sure if you look at handlers thought Aprile handler Stasch API, these, as you can
see right here in the all sales function, they're supposed to be INTs.
And I need to make sure that they're going to be ense.
And that's really easy.
I'll just call parsing and based health and do the same thing here, Persse and Bastet, and that works
really well.
Now, the last thing I need to take care of here, again, just an oversight on my part, which seems
to happen a fair bit.
If you recall, a while ago I added the status column to this table.
But if there's no data, we need to fix the Carlsbad, otherwise it's just not going to look right.
So down here at the very end of the Fed statement, I need to change that four to a five.
So let's restart our application like stop, make start.
We'll go back to our webpage and see if we get everything right, so I reload this page and there are.
Let's go to the next page and that works and the next page and that works.
And let's go back.
That works.
Let's try going to page three and that works.
So there you go.
That's a pretty straightforward exercise.
Now, there were a fair number of steps, but none of them were terribly difficult.
So the next step, of course, is to do the same thing for the all subscriptions table.
Now, I only have two subscriptions in there.
So again, I'll have to populated with a little more data if I want this to work properly.
But all you need to do is basically follow the same steps you did for the sales page, for the subscriptions
page.
So I'll leave that as an exercise for you.
Give that a whirl.
And in the next lecture, I'll show you how I did it.