Según la API tienes que hacer queries de las pagina para obtener la paginación, por ejemplo: ?page=1
, por lo tanto lo que debes hacer es simplmentesimplemente cambiar la url cuando hagas una request, fíjate en el siguiente ejemplo (mínimo) hecho con fetch pero que representa lo que debes hacer:
const mas = document.querySelector('#mas')
const menos = document.querySelector('#menos')
const content = document.querySelector('#content')
let page = 1;
const handler = async p => {
console.log(p)
content.innerHTML = ""
const res = await fetch(
`https://reqres.in/api/users?page=${p}`,
);
const { data } = await res.json()
data.forEach(el => {
const img = document.createElement('img')
img.src = el.avatar
content.appendChild(img)
})
}
handler(page)
mas.addEventListener('click', () => {
page++
handler(page)
})
menos.addEventListener('click', () => {
page = page > 1 ? page - 1 : page
handler(page)
})
<div id="buttons">
<h1>Paginación</h1>
<button id="menos">-</button>
<button id="mas">+</button>
</div>
<div id="content" >
</div>
Lo que se hace en el ejemplo es simplemente tener una variable donde almacenamos el numero y en el la función handler hacemos la request a la api con el numero de la pagina en la URL, esta cambia según avances o disminuya la paginación.
También cabe destacar que en tu código haces algo que puede llegar a confundirte, cuando haces esto let sumar1= page=1
lo que haces es crear dos variables al mismo tiempo y una es equivalente a la otra, me parece que lo querias hacer como un string, esto es como lo deberias hacer, nota las comillas: let sumar1= 'page=1'
, esto se presta a confusión porque a primeras no hay ningún error ya que la sintaxis está bien pero por lo tanto js no te avisa.
Y también la intención de sumar una string está mal, solo puedes sumar números si no obtendrás una concatenación o un error ya que let sumar1= 'page=1'; sumar1++
no es un numero y no obtendrás el resultado deseado.
Espero que te sea de ayuda un saludo.