Estoy usando una API de búsqueda de TMDB que tiene datos de las películas respectivas, es decir, nombre, imagen, descripción. etc. Entonces, cuando busco una palabra clave "Nueva York", la API devuelve todas las películas que tienen la palabra "Nueva York". La API está paginada y solo devuelve 20 resultados por página. Además, mi HTML también está paginado y muestra 20 resultados por página. Lo que quiero lograr es que cuando haga clic en el siguiente botón de la paginación HTML, la API debería activarse con &page=2 y mostrar los resultados de la página 2 de la API en la página 2 HTML.
Código para recuperar datos de la primera página de la API
const searchMovies = function (searchValue) { let page = 1; do { fetch(searchAPIURL + "&query=" + searchValue + `&page=${page}`) .then((response) => response.json()) .then((data) => { console.log(data); let totalPages = data.total_pages; let searchResults = data.results; console.log(searchResults); searchMovieInit(searchResults); }); } while (totalPages); };el siguiente botón
const nextBtn = document.getElementById("next-btn");Agrego una clase deshabilitada a todo -1 y eliminé la clase deshabilitada a cualquier cosa al frente de la página actual. Y cada vez que alguien hace clic en el siguiente botón, se llama a pageCall, que toma el siguiente número y recuerda la función getmovies con "https://api.themoviedb.org/3/trending/tv/week?api_key=###&page=2 "como la URL
La función pageCall divide la URL en "https://api.themoviedb.org/3/trending/tv/week?" "api_key=###&page=2" que hace que la matriz urlsplit
Luego divide "api_key=###&page=2" que es urlspilt[1] en "api_key=###" y "page=2" que se llama queryParams y luego toma las consultas y divide la que tiene el longitud de la longitud de los parámetros de consulta - 1
const prev = document.getElementById("prev"); const next = document.getElementById("next"); const current = document.getElementById("current"); let currentPage = 1; let NextPage = 2; let prevPage = 3; let lastUrl = ""; let totalpages = 100; function getMovies(url) { lastUrl = url; fetch(url) .then(res => res.json()) .then(data => if (data.length !== 0) { showMovies(data.results); currentPage = data.page; NextPage = currentPage + 1; prevPage = currentPage - 1; totalpages = data.total_pages; current.innerText = currentPage; if (currentPage <= 1) { prev.classList.add("disabled"); next.classList.remove("disabled"); } else if (currentPage >= totalpages) { prev.classList.remove("disabled"); next.classList.add("disabled"); } else { prev.classList.remove("disabled"); next.classList.remove("disabled"); } } }); } next.addEventListener("click", () => { if (NextPage <= totalpages) { pageCall(NextPage); } }); prev.addEventListener("click", () => { if (prevPage > 0) { pageCall(prevPage); } }); function pageCall(page) { let urlsplit = lastUrl.split("?"); let queryParams = urlsplit[1].split("&"); let key = queryParams[queryParams.length - 1].split("="); if (key[0] != "page") { let url = lastUrl + "&page=" + page; getMovies(url); } else { key[1] = page.toString(); let a = key.join("="); queryParams[queryParams.length - 1] = a; let b = queryParams.join("&"); let url = urlsplit[0] + "?" + b; getMovies(url); } }