Of course, there are more than ten characters in the Star Wars films, but our table is only showing ten.
This is because the API is using pagination as such at the end of each link: /people/?page=1/.
So how do we add pagination to the table?
First, here is the code as it is at the moment:
To start, we need to modify writeToDocument() once again:
Now we insert another function just before writeToDocument() that inserts the "Next" and "Previous" buttons:
Our entire code now looks like this:
As a reminder, we now have a table, with "Next" and "Previous buttons - although we've not yet seen a "Previous" button because
when we click on "Next", the entire const baseURL is being appended to the actual URL.
This effectively is not the result we want!
So now lets make these buttons work. But first, a reminder of the code so far:
We need to change both the JavaScript and the HTML to account for this.
First, lets change the JavaScript code top line and the first function, getData() :
Now, we change all other instances of "type" to "url". These are in writeToDocument():
So our entire code now looks like this:
Now we change the HTML. We append the full
to the buttons:
Now we can see the whole result: when we click the buttons below, we have our table appear, and the "Next" and "previous" buttons work!