4

En muchos casos he visto este tipo de paginación que, me parece bastante particular y me causa intriga saber cómo funciona. Un claro ejemplo es Datatables, el plugin para jQuery, el cual implementa este tipo de paginación.

Lo único que sé es que se creó en Stranger Studios. He visto un par de ejemplos, generalmente en PHP, pero no termino de entender cómo funciona el algoritmo exactamente.

1 respuesta 1

4

Básicamente necesitas saber el total de páginas, la página actual, y el rango de números a mostrar hacia los lados.

Haces una iteración desde el inicio (que siempre es 1) hasta la página final. En tu array de páginas insertas el botón 1, los botones de enmedio, y el botón final.

En vivo, con los valores que pusiste: actual 5, rango 1 y final 11:

function rangodepaginas(actual, rango, final) {
        var desde=actual - rango,
            hasta = actual + rango,
            paginas=[];
        for(var i=1; i<=final ; i++) {
           if(i===1 || i===final || (i >= desde && i <= hasta)) {
              paginas.push(i);
           }
        }
        return paginas;
    
    }

    // Ejemplo con pagina=5, rango=1, total = 11

    console.log(rangodepaginas(5,1,11));

Te entrega [1,4,5,6,11].

Ahora viene una segunda función que recorre el array obtenido y dice: si el elemento anterior es 1, y el elemento actual no es 2, inserto ellipsis. Si el elemento siguiente es el final, y el actual no es el final -1, inserto ellipsis.

var laspaginas=[1,4,5,6,11];

function paginaEllipsis(paginas) {
      var final=paginas.pop();
      paginas.push(final);
      rango_con_ellipsis=[];
      for(var i=1;i<paginas.length-1;i++) {

         if(paginas[i-1]===1 && paginas[i]!==2) {
             rango_con_ellipsis.push(1);
             rango_con_ellipsis.push('...');
         }
         rango_con_ellipsis.push(paginas[i]);

                  if(paginas[i+1]===final && paginas[i]!==(final-1)) {
             rango_con_ellipsis.push('...');
             rango_con_ellipsis.push(final);
         }
      }
      return rango_con_ellipsis;

}

console.log(paginaEllipsis(laspaginas));

Te entrega [1,'...',4,5,6,'...',11].

0

Tu Respuesta

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

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