isa44.74/mandalorian
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Pagination fonctionnelle dans planets

Browse Source
This commit is contained in:
William Noris 2021-10-19 16:04:18 +02:00
parent 8d4456bae6
commit b32e65c82b
1 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
scripts/planets.js
View File

@ -5,7 +5,7 @@ const planetes = document.getElementById("resultats");
console.log('planet.js loaded'); console.log('planet.js loaded');
function remplissage(results){ function remplissage(results) {
planetes.innerHTML = ""; planetes.innerHTML = "";
@ -13,7 +13,7 @@ function remplissage(results){
const nextUrl = results.next; const nextUrl = results.next;
const tabResults = results.results; const tabResults = results.results;
for(resultPlanet of tabResults){ for (resultPlanet of tabResults) {
const nom = resultPlanet.name; const nom = resultPlanet.name;
const diametre = resultPlanet.diameter; const diametre = resultPlanet.diameter;
const climate = resultPlanet.climate; const climate = resultPlanet.climate;
@ -34,7 +34,7 @@ function remplissage(results){
planetes.innerHTML += planetes.innerHTML +=
`<section class="resultat"> `<section class="resultat">
<h1 class="titreAccordeon">${nom}</h1> <h1 class="titreAccordeon">${nom}</h1>
<div class="accordeon"> <div class="accordeon">
<div class="1"> <div class="1">
@ -56,28 +56,36 @@ function remplissage(results){
let firstPage = false; let firstPage = false;
let lastPage = false; let lastPage = false;
if(previousUrl == null) firstPage = true; if (previousUrl == null) firstPage = true;
if(nextUrl == null) lastPage = true; if (nextUrl == null) lastPage = true;
let previousButton = `<button id="prevButton">Page précédente</button>`; let previousButton = `<button id="prevButton">Page précédente</button>`;
let currentButton = `${currentPage}`; let currentButton = `${currentPage}`;
let nextButton = `<button id="nextButton">Page suivante</button>`; let nextButton = `<button id="nextButton">Page suivante</button>`;
if(!firstPage) {
planetes.innerHTML += previousButton; planetes.innerHTML += previousButton;
console.log(document.getElementById("prevButton"));
document.getElementById("prevButton").addEventListener("click", () => {
api_call(previousUrl, remplissage);
});
}
planetes.innerHTML += currentButton; planetes.innerHTML += currentButton;
if(!lastPage) { planetes.innerHTML += nextButton;
planetes.innerHTML += nextButton;
document.getElementById("nextButton").addEventListener("click", () => { if(firstPage){
api_call(nextUrl, remplissage); document.getElementById("prevButton").hidden = true;
}); }
}; else{
document.getElementById("prevButton").hidden = false;
}
if(lastPage){
document.getElementById("nextButton").hidden = true;
}
else{
document.getElementById("nextButton").hidden = false;
}
document.getElementById("prevButton").addEventListener("click", () => {
api_call(previousUrl, remplissage);
});
document.getElementById("nextButton").addEventListener("click", () => {
api_call(nextUrl, remplissage);
});
} }
api_call(API_URL + "/planets", remplissage); api_call(API_URL + "/planets", remplissage);