Como crear paginacion con jQuery estilo Facebook o Twitter

Inicio → Tutoriales → jQuery → Como crear paginacion con jQuery estilo Facebook o Twitter

En nuestro tutorial anterior aprendimos a implementar paginacion utilizando PHP y la libreria Zebra Pagination, pero para hacerlo un poco mas interesante podemos utilizar jQuery para modificar nuestro código y crear una paginacion como la que usa Twitter o Facebook en sus sitios web via AJAX. Para este tutorial vamos a utilizar el código fuente del video anterior así que sino lo han visto esta es su oportunidad.

Por el 23 de abril, 2012   /   jQuery, Tutoriales   /   17 comentarios
  • Ricardo

    Excelente tutorial!

    Me muestra los primeros 6 resultados pero al dar clic en “Mostrar más” me muestra otra vez los mismos resultados anteriores.

    Cuál será el error?

  • Yosvany
  • Luis Gerardo Rojas.

    Me gusta su sistema de comentarios.. Me preguntaba Podria facilitarme el codigo…?? Gracias..

  • Luis Rojas

    Gracias…

  • http://www.facebook.com/gabrielperezwsh Gabriel Perez Grandez

    Hola Jv Software, tu tutorial me ha sido de mucha utilidad y me funciona a la perfección, salvo por un detalle. Cuando llego al final de la paginacion y sigo haciendo clic al boton ver mas, me repite la ultima pagina cada vez. Quisiera saber si hay alguna forma de que esto no suceda haciendo que cuando ya no haya mas paginacion este aparezca un texto y no un link que diga fin del contenido o algo asi, Muchas gracias por tu ayuda y felicitaciones por tu excelente trabajo

  • José Manuel Llorca Santana

    Hola JV Software. Me ha salido perfectamente, el unico problema es que cuando me muestra los demas paises, me salen en el formato utf-8 (aun habiendolo cambiado mas arriba a iso-8859-1) puedes explicarme como lo cambio?

  • Ozz

    Hola que tal muy bueno tu tutorial, es justo lo que necesitaba para paginar en vez de las clasicas paginas numeradas.
    Tengo un problema cuando hago click en el “ver mas” no me muestra los restantes sino que me los duplica copie y pegue el codigo y me hace lo mismo con los dos ejemplos…este y el anterior. hay una especie de problema en la consulta?
    o no se que estoy haciendo mal.

    Gracias y espero que me respondas!

    un saludo

  • bywiik2

    hey hola amigos muy buen tutorial excelente diria pero tengo un poblema cuando incluyo la hoja de estilo a mi archivo donde voy hacer el paginador me sale mezclado con lo que tengo en mi pagina ya que el tiene efectos a casi todas las etiquetas pero yo no quiero eso que pase porq solo quiero que el efecto se ve asi como esta en la tabla que contiene los resultados de el paginador y el div donde esta incluido los numero de las paginas el de abajo, ps quiero que me ayuden a reparar esta situacion ya que me veo emproblemado con las hojas de estilo un saludo y que les vaya bien

  • Oscar

    hola que tal, el tutorial me parece excelente y de mucha ayuda, muchas gracias por ello. Sin embargo me pasa lo siguiente con este ejemplo: cuando uno no rebasa los 10 links de acuerdo al numero de datos que especificas que aparezcan de acuerdo a tu consulta…, el “mostrar más” muestra los mismos registros, no los cambia, pero si uno rebasa los 10 links si lo hace, por ejemplo en una base de 58 registros coloco que se muestren 6 registros en cada pagina y no los cambia, pero si coloco que sean 5 registros si cambia los datos, se puede corregir esto? o es uno de los bugs de esta libreria?

    De antemano muchas gracias

  • José

    Hola Javier, me intereso mucho la manera de paginar utilizando Zebra Pagination, segui todos los pasos que tienes en tu videotutorial, pero mi problema es el siguiente: No utilizo el boostrap de twitter, por lo que al momento de utilizar el metodo render(); me muestra la paginación pero no me muestran las flechas de larrow y rarrow (segun trae la libreria) por lo que al momento de actualizar el enlace de Mostrar más no se puede obtener la url (la que tienes en $.ajax). Tu utilizar ‘pagination li.next a’ y a mi no me pinta ese link… me gustaria que me ayudaras en eso, estuve leyendo la libreria y tiene una clase para pintar el next la cual es navigation right, ya puse en la url: $(‘.pagination a.navigation right’).attr(‘href’) y simplemente no hace nada, muestra siempre los mismos registros ya que, como bien mencionas, no se actualiza el link por lo que antes escribi.. Bueno, eso es todo, te felicito por compartir todos tus conocimientos, que Dios te siga bendiciendo. Saludos desde Mérida, Yucatán, México.

  • fernando

    Hola una consulta, Cual es el editor para HTML que utilizas en este tutorial? me parece muy interesante por la tabulacion, se ve muy organizado todo. Gracias de antemano. Muy buenos los tutos sigue adelante.

    • http://www.jvsoftware.com Javier Villanueva

      Hola, es sublime text 2 http://www.sublimetext.com

      • Fernando

        muchisimas gracias lo probare :D saludos Javier.sigue adelante muy bueno el blog

  • Máximo

    Buenísimo tutorial!!!

    Me gustaría amigo si puedes hacer un tutorial de como hacer una Nube de Etiquetas como la que tienen ustedes a la derecha de está Web.

    Saludos!!!

  • fher

    Muchas gracias por compartir, ya mismo intentare poner en marcha el tutorial para crear esta paginacion. saludos

    fernando

  • Diego

    Muchas gracias por el tutorial, esta buenísimo, he aprendido algo que usare para un proyecto el cual estoy realizando, infinitas gracias.

  • Julio

    hola amigo estan interesantes todos tus tutoriales, gracias por dedicar mucho tiempo a tus seguidores gracias

Últimos Tutoriales

Testimonios

JV Software did a fantastic job converting a static site to WordPress. Best contractor I've worked with.
- Regan Wilders, United States
JV Software was very professional during all parts of our project and very quick with responses.
- Rob W., Canada