Paginación simple con JavaScript

Empezamos la sección de Programación con un script muy simple. Necesitaba un paginador en JavaScript rápidamente y sin complicaciones y que paginara tablas. Buscando por internet y con un poco de código de aquí y un poco de allí montamos este pequeño script que funciona perfectamente para paginaciones no muy grandes.
El funcionamiento es muy simple, tan solo necesitamos insertar un par de líneas de código.

Paso 1
Insertar entre las etiquetas head el siguiente código:

<script type=”text/javascript” src=”paging.js”></script>

Paso 2
Donde queramos mostrar el paginador insertaremos:

<div style=”display:none; border: 0px;” id=”NavPosicion”></div>

Paso 3 Al final de nuestra página insertaremos:

<script type=”text/javascript”>
var pager = new Pager(‘resultados’, 10);
pager.init();
pager.showPageNav(‘pager’, ‘NavPosicion‘);
pager.showPage(1);
</script>

Paso 4
La tabla que vayamos a paginar debe tener un id, como por ejemplo:

<table id=”resultados”>

Fijaros que los nombres del id de la tabla ( resultados ), como el id del div ( NavPosicion ) son los que están definidos al crear el objeto pager en el paso 3, si los cambias debéis cambiarlos en todas las llamadas.

El 10 que se define al declarar el objeto pager es el número de resultados por cada página.

Con estos simples pasos tendremos implementado un sencillo paginador en JavaScript. Desde aquí podéis descargar el .js necesario para que todo funcione correctamente, acordaros de comprobar la ruta del paso 1.

p.d.: si conocéis algún plugin que permita colorear la sintaxis del código manteniendo el editor WYSIWYG os pediría que me dijéseis cual, porque los que he probado necesitan tener el editor visual desactivado y como no soy el único que, teoricamente, escribe en el blog si quito el editor visual me cuelgan…jejeje

40 opiniones en “Paginación simple con JavaScript”

  1. En donde podemos verlo funcionando?… tengo un while de Php que busca resultados en la base de datos… este while debe estar dentro del Resultados aqui (nota: yo usé un div en ves de una tabla) y nada… o tiene que ser forzoso una tabla???

  2. Hola Norberto, desgraciadamente en este momento no tengo ningún ejemplo funcionando.

    Pero debería funcionarte correctamente con un div, comprueba que los nombres de los ids sean correctos, seguramente ese sea el problema que tienes.

    ¿La ruta al .js es correcta?

    ¿Te devuelve algún error el navegador?

    ¿Puedes pasarnos un link para verlo?

    Salu2

  3. Hola Alexander, comprueba el id del div y de la tabla, los errores más comunes por los que no funciona el scripts es que los nombres no son iguales.

    Si puedes, envíanos la URL donde lo tienes montado y le echamos un vistazo.

    Saludos

  4. Hola Ivan, si, claro que se puede hacer solo con php, lo único es que para algunas cosas es más lento. Piensa que por cada página en php tienes que hacer una llamada al servidor.

    Depende del caso puede ser mejor hacerlo de una forma u otra.

    Me apunto el crear un post con una paginación simple solo con PHP.

  5. Buenas noches, he probado el paginador en un jsp y no me funciona.

    Tengo una tabla dinámica (recibe datos de una bbdd MySQL en formato JSON) con un id de tabla que coincide con la llamada a la función Pager, y también el div id coincide con la llamada a la función showPageNav.

    En esta llamada:

    pager.showPageNav('pager','indicador');

    el valor de 'pager' debe ser el nombre de la página jsp que estamos tratando? no sé por dónde pueden ir los tiros. El navegador no me muestra ningún error, simplemente se me muestra la tabla con sus 12 registros. No puedo pasaros ninguna url, ya que estoy trabajando en local.

    Gracias, saludos.

    1. Hola Erku,

      En la llamada pager.showPageNav(‘pager’,'indicador’); el segundo parámetro es el nombre del div donde quieres mostrar el paginador, no el nombre de la página y el primer parámetro es el nombre de la variable que se usa para instanciar a la clase Pager.
      Espero haberte aclarado el tema, si no, avísanos para intentar solucionarlo.

      Salu2

      1. Buenas,

        Sí, mi así que debería funcionar, pero no lo hace. Os pongo aquí algo más de código, por si os puede ser útil:

        Para las funciones JavaScript, tengo una función ( q se llama al pulsar un botón de consulta) que crea una tabla dinámica al recibir los datos del servlet y justamente he pegado ahí la llamada al paginador:

        function crearTablaLibros(){

        var libraco=eval("("+obj.respuestaTexto()+")");

        var textoHTML="";

        textoHTML+="";

        textoHTML+="Portada";

        textoHTML+="Título";

        textoHTML+="Autor";

        textoHTML+="Categoría";

        textoHTML+="Editorial";

        textoHTML+="Fecha";

        textoHTML+="Edición";

        textoHTML+="ISBN";

        textoHTML+="Stock";

        textoHTML+="Precio(€)";

        textoHTML+="";

        for(var elm = 0;elm < libraco.length;elm++){

        textoHTML+="";

        textoHTML+="";

        textoHTML+=""+libraco[elm].titulo+"";

        textoHTML+=""+libraco[elm].autor+"";

        textoHTML+=""+libraco[elm].categoria+"";

        textoHTML+=""+libraco[elm].editorial+"";

        textoHTML+=""+libraco[elm].fecha+"";

        textoHTML+=""+libraco[elm].edicion+"";

        textoHTML+=""+libraco[elm].isbn+"";

        textoHTML+=""+libraco[elm].stock+"";

        textoHTML+=""+libraco[elm].precio+"";

        textoHTML+="";

        }

        textoHTML+="";

        document.getElementById("libros").innerHTML=textoHTML;

        var pager = new Pager('libracoscos',10);

        pager.init();

        pager.showPageNav('pager','indicador');

        pager.showPage(1);

        }

        En el código html tengo:

        Gracias por vuestra atención y ayuda.

        Saludos,

        1. No sé por qué el sistema se ha tragado varias cosas que he puesto. Lo añado:

          En el código html tengo:

          y en la parte de arriba tengo también puesto:

          Gracias por la ayuda.

      1. Buenas tardes, ya lo he solucionado. He tenido varios problemas con las llamadas a las funciones, así que he definido la variable pager como global, y he tenido que sacar varias funciones del paging.js al jsp, ya que no las estaba llamando correctamente.

        gracias por vuestra atención y el código, saludos!

  6. Hola,
    estoy intentando usar el javascript pero no me funciona, he seguido tal cual los pasos. Tengo que visualizar una lista de base de datos. Para ello uso con y ademas . No se que puede ocurrir ya que no me da ningún problema, simplemente me visualiza mi lista sin mas.
    Alguna sugerencia?
    Y otra pregunta…se podría utilizar sin tener una tabla?

    1. Hola Aless,

      Disculpa que no te contestara antes, pero he estado liadillo.

      No entiendo cuando dices “Para ello uso con y ademas .”
      Utiliza algún plugin tipo firebug para ver los posibles errores que tienes.

      El usarlo con tablas o no sí solo tienes que adecuar las funciones para que en vez de la tabla coja, por ejemplo un div.

      Si puedes pastea en pastebin o por aquí tu código si no consigues hacerlo funcionar.

      Salu2

      1. Hola wiki,
        perdon por la frase esa pero juraría que habia puesto otra cosa, xd!
        Queria decir que estoy usando logic:iterate con bean:write y tambien html:radio porque lo que quiero es una lista para seleccionar uno de ellos.
        He estado mirando con firebug, y por lo que veo lo que no llega a estar bien es el paso 2, la inserccion del paginador. Me sale en el firebug con un color como si no estuviera disponible o desseleccionado, vamos sin intensidad en los colores como el resto de las lineas. Y no se porque podría ser. Cual es el id del div que deberia poner?porque no se si ahi estara el fallo, aunque he intentado probar con varios id y nada, alguna sugerencia?Lo tengo que poner ddentro o fuera del logic:iterate, html:form…o da igual?

        Gracias!

        1. Hola Aless,

          Supongo que sería cosa del editor 😉

          En principio no debe influir como estés “recogiendo” lo datos. Fijate que el script js va a buscar el div del paso 2 para pintar dentro los datos que vienen de la consulta.
          El nombre del div es el que tienes que poner en pager.showPageNav(‘pager’, ‘AQUI‘);
          Eso si, el paging.js está preparado para pintar celdas por lo que si lo quieres hacer de otra forma deberás modificarlo a tu gusto.

          ¿Tienes alguna url donde se pueda ver un ejemplo?

          1. Hola wiki y gracias por atenderme,
            todavia no he conseguido nada, entiendo que tienes que poner el id del div pero cual?tiene que tener una configuracion previa determinada¿?o no? he probado con varios y ninguno me funciona.

            Lo siento pero no tengo ninguna url, lo estoy haciendo en local.
            Para intentar ver si funcionaba he hecho una simple pagina con un tabla sencilla y tampoco me funciona, aqui esta el codigo: (Yo diría que el problema está en el id del div)

            JSP Page

            Hola

            Adios

            Hola

            Adios

            Hola

            var pager = new Pager(‘hola’, 2);
            pager.init();
            pager.showPageNav(‘pager’, ‘body’);
            pager.showPage(1);

          2. Vaya, parece que no me deja pegar codigo aqui,
            pero resumiendo he creado una tabla con el id=”hola” y al final de la tabla he puesto el div id=”body” style=”display:none; border: 1px;” y despues el script.

          3. Hola Aless,

            Prueba a llamar el id del div NavPosicion y dime si te funciona, no recuerdo exactamente el código del js, a ver si pasado mañana puedo pararme a mirarlo, pero creo recordar que el nombre del id del div estaba forzado… pero no estoy seguro.

            Salu2

  7. Hola, fíjate que estuve probando pero no me funciona, lo único que sale según firebug es en sombras podrías ayudarme gracias.-

    1. Hola Diana,

      ¿Puedes darnos más datos, ver el código que utilizas? No entiendo a que te refieres cuando dices que según el firebug sale en sombras.

      Normalmente suele dar errores por no utilizar bien el id del div o de la tabla.

      Salu2 y gracias por tu comentario

  8. Wiki hoy probe y no me funciona me sale el siguiente error

    ReferenceError: Pager is not defined
    /js/jquery-1.3.2.min.js
    Line 12

    1. Hola @Diana, has descargado el fichero paging.rar? Contiene el fichero paging.js necesario para que funcione correctamente el paginador.

      Lo puedes descargar desde este enlace http://goo.gl/2D5V9t

      En el texto del post existe también un enlace para la descarga.

      Salu2

    1. Hola @esmeralda,
      Para que te muestre los siguientes resultados debes enviárselos al javascript que será el que se encargue de mostrarlo. También puedes crear una nueva acción para que al solicitar una nueva página te genere los nuevos resultados.
      El abanico de posibilidades es grande todo dependerá de la cantidad de resultados que tengas y el tiempo que necesites

      Salu2

  9. Muy bueno, muchas gracias. Sólo comentar que en mi caso la llamada al menú de paginación
    La he sustituido por:

    Ya que con el estilo original no se veía en mi web.
    Saludos y gracias de nuevo.

    1. Hola @Alejandro, me alegra que el código te haya servido.El tema de los estilos pues fantástico, como ves, es algo muy básico para que el ejemplo funcione.

      Salu2 y esperamos verte por aquí en otra ocasión

  10. WOW esta excelente para mi JSP, sin embargo tengo una duda, porque repite en todas las paginas el primer valor de la tabla??? Por ejemplo si tengo 20 elementos en la pagina 1 me da los primero 10 correctamente, sin embargo en la segunda pagina primero me da el primer valor nuevamente y 9 restante. O sea el primer valor se duplica en todas las paginas

    1. Hola Rafael,
      El script solo muestra los datos que le llegan, no los modifica, comprueba que no te llegue ese dato repetido…

      Salu2 y gracias por tu comentario.

  11. Hola,

    en primer lugar gracias por el tutorial,esta muy bien explicado! Lo unico que me sale un error en paging.js, en la linea 26,este es el error que me sale :

    Uncaught TypeError: Cannot set property ‘className’ of null paging.js:26
    Pager.showPage paging.js:26
    (anonymous function)

  12. Todo funciona bien siguiendo exactamente lo descrito, el problema se su cita en PORQUE NO EXISTE EL STYLE. Para que funcione ubica la linea fuera de la tabla y obiando el style: .

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *