So let's keep working on the front end and see if we can implement some kind of pagination system that
allows us to go from page to page on our results.
So before we go too much further, you'll notice here in all dash sales, dot page HTML in this ad event
intersection, when I did find the body, I called this current page in the payload that I'm sending
the handlers dash API.
But if you look at handlers, dash API, actually expect that to be called page right here.
So let's fix that.
That should be page.
OK, now the next thing I'm going to do is we're going to have navigation to jump from page to page
below the table.
And in order to make that happen, we're going to have to call some kind of function that refreshes
the contents of our table.
So maybe it makes sense to move all of this, everything inside this document.
Add event listener all the way down to here.
Let's cut it out of their cut and let's create a new function.
And I'll put it right here and I'll call this function update table and it will take two two arguments
for page size and scope for current page.
And what I'll do is just paste that right in there, OK?
So that means we need to make a change here when we're building our body.
It's no longer page size, which is up here and it's no longer current page, which is up here.
Instead is the arguments we received piece for page size and scope for current page.
OK.
And then down here inside or out of it, listen, all we have to do is call Updatable and give it page
size, which is page size, that one defined at the very top of our script, tag and curve page.
So let's make sure that works before we go too much further, which can move this over.
So I'll just go stop, start and just make sure that we don't have any JavaScript errors, which I often
do.
So back to my Web browser and I'll go to admin all sales.
And there you can see that we have Arthur Curry and Victor Stone as orders 19 and 20.
And obviously there are orders before that.
So we have that part working.
Now, the next thing I want to do is I want to draw some kind of pagination underneath my table.
So let's get that started up here.
After my closing table tag, I'll use bootstraps progenitor classes and you can see those right over
here.
If we go to get bootstrap dotcom and we go to documentation and we look into components and we find
pagination.
It's right here, this is an example to draw a nice pageant like that, so we'll do something like that.
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
a ULLE, which I'll give the idea of Tejinder and I'll give it a class which is required of pagination
and I'll close the up and I'll just leave that empty.
Now down here before my updatable, I'm going to define another function.
Which I'll call pageant pagination.
And it requires two arguments, pages and her page, so the number of pages and what page are we currently
on and what to do first is get a reference to that page later, Ule.
So let me I'll just call a P equal document.
Don't get on my ID.
And we're looking for Pageonce tour.
That gives me a reference to the pageant.
You will and I will define a variable called H2 now and I'll make it equal to using the JavaScript template.
Syntax for class equals page dash item which bootstrap requires and then I'll put an attack in there
a F equals one.
They can go to hash bank so it doesn't do anything right now.
I'll give it the class of Page Dasch link to put an equal sign on their page dash link and then I'm
going to add my own class so I can get these later on.
I'll just call it page.
And I'm also going to put a data variable data dash, and I'll call it page equals, and here's where
I'll use my JavaScript templating syntax.
I'll make it per page, which I received as a parameter to this function, minus one.
And then I'll close my quotes, close my aztek, or put a less than sign in there, close my A and close
my ally and finally close my back.
So that's what each was initially equal to.
Now I just loop through the number of pages four and I'll just say, Vir, I equals zero and I want
to go until I is less than or equal to pages, the number of pages we have.
And I'll add one each time through and close my curly bracket and inside of here I'll say HTML plus
equals and I'll just copy this and modify it.
Because I want to put one entry for each page, it's available to the end user, so it's not going to
be data page equals cur page minus one.
It'll be I plus one for the first time through is zero and we add one to it.
So the first time through it'll put one for the data page and the same thing here we'll get a plus one
instead of a less than.
And then finally.
This copy that again.
After we're finished our loop, we'll put an expert.
And this will be equal to her page plus one.
And we'll make this a greater than sorry.
OK, so now all we have to do is call this and it should populate our pagination navigation properly.
So we'll call that right after we finish updating the table.
So if we have data orders, ends down here and we'll just call.
Progenitor and give it as two required arguments, which in our case would be dated last page and dated
current page.
Now, if that works, then we should get a list of buttons that won't do anything, but at least they'll
show up there.
And they did last page and dated our current page, as you'll recall, come from Handler's API right
down here.
The response we have last page and current page.
So we should have some values here if we did that properly.
Now, let's make sure that we have updated our models appropriately so models to make sure there's nothing
left hard coded in there.
Sit down here.
That looks good.
I think we're good.
Let's run this and see what happens.
So make stop, make start.
And if all goes well, I should at least have a list of pagination navigation things at the bottom of
my screen when I reload this page, let's open it up for JavaScript errors, which I often have to console.
Clear that, Rila.
It doesn't look good.
Let's inspect this and see if at least we have some e-mail in there.
So we have the table.
Which would be inside of here.
Roll call.
Table and there's a map.
I must have left something off of that, so it's empty.
Let's go back here and see what I left it, I invariably do that sort of thing.
I know exactly what is so what all sales page.
We have this nice function and at no point do we actually populate.
Are you OK?
So all we have to add here, and this was a silly oversight on my part, is Peter TML.
Is equal to female.
All right, let's try that again, mixed up next start.
And try reloading that page one more time, reload.
That looks better.
So now we have all these buttons and of course, you can position them wherever you want.
I'm going to leave them here for right now.
So when I click on this one right now, you shouldn't do anything because we can't actually go earlier
than page one.
And when I click, this one should take me to page two.
And when I jump on a specific number, it should take me right to the appropriate page.
So that's not difficult, it's just pure JavaScript coding at this point, and we'll take care of that
in the next lecture.