1

Primero que nada quiero aclarar que no doy por hecho que esto se puede realizar. Mi consulta es si es posible paginar los resultados de un ciclo for en Javascript, tomemos el siguiente código de ejemplo:

var i = null;
for (i = 0; i <= 100; i++) {
    document.write(i + "<br/>");
    if (i % 10 == 0) {
        document.write("Paginación<br/>");
    }
}

Si se ejecuta el código se puede apreciar que cada 10 iteraciones muestra un mensaje (un ejemplo), entonces, quería saber si era posible que en ésta misma idea se puedan paginar los resultados, es decir, que al inicio me muestre solo los primeros 10 números, y con un botón, yo pueda mostrar los siguientes 10 elementos y así sucesivamente.

5
  • No eres muy claro con lo que dices. Te refieres a un botón en HTML que aparezca prácticamente donde dice paginación? el 6 abr. 2018 a las 0:40
  • Correcto, perdón por no haber explicado mejor esa parte.
    – Jalkhov
    el 6 abr. 2018 a las 0:42
  • Y ese boton va a permitir que al darle clic se sumen 10 numeros mas, estoy en lo correcto? el 6 abr. 2018 a las 0:43
  • Bueno, no como tal que se sumen, sería que se muestren porque los numeros ya estarian, solo que ocultos o algo así.
    – Jalkhov
    el 6 abr. 2018 a las 1:02
  • Addevenlistener y un setinterval el 6 abr. 2018 a las 1:22

1 respuesta 1

3

Se puede, algo parecido.

Con un loop crearias los elementos de las paginas. Cada pagina se guardaria en un bloque div, el primero de ellos visible, el resto oculto display: none

Con otro loop, crearias los botones de paginacion y llamarias una funcion para mostrar otra pagina.

var i;
var hasta = 100;
var tamanioPagina = 10;

document.write("<div data-pagina='1'>");
for(i=1; i<=hasta; i++){
    if (i > 1 && i % tamanioPagina == 1){
        document.write(`</div><div data-pagina="${(i-1)/tamanioPagina + 1}" style="display: none">`);
    }
    document.write(i+"<br/>");
}
document.write("</div>");

var cantidadPaginas = Math.ceil(hasta / tamanioPagina);
for(i=1; i<=cantidadPaginas; i++){
    document.write(`<a href="javascript:pagina(${i})">${i}</a>`);
}

function pagina(n) {
    var paginas = document.querySelectorAll("div[data-pagina]");
    for(var i=1; i<=paginas.length; ++i){
        paginas[i-1].style = n == i ? "" : "display: none";
    }
}
a {
    padding-right: 10px;
}

1
  • Absolutamente perfecto, resuelto el problema.
    – Jalkhov
    el 6 abr. 2018 a las 1:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.