Paginación con jQuery

Paginación con jQuery / Mariano J. Muzas HTML5, CSS3, PHP, Mysql, bbdd, javascript, JQuery, JQuerymobile, Bootstrap, Material Design, WordPress, Newsletter, Api de Facebook, Api de twitter, PrestaShop.

Paginación con jQuery

La paginación puede ser un quebradero de cabeza o puede ser algo sencillo, útil e incluso creativo. Con este jQuery llamado jPage, creado por el programador Luís Almeida, que permite realizar la paginación desde el lado del navegador. Somos muchos los que lo usamos por su efectividad.

Según su propio ejemplo básico, este seria el HTML:

<ul id="itemContainer">
    <li><img src="img/img1.jpg" alt="image"></li>
    <li><img src="img/img2.jpg" alt="image"></li>
    <li><img src="img/img3.jpg" alt="image"></li>
</ul>

<div class="holder"></div>

El Jquery se compone de tres archivos, pero la clave reside en este código que encontrareis en el archivo jPages.js

	$(function(){
	  $("div.holder").jPages({
	    containerID  : "itemContainer",
	    perPage      : 9,
	    startPage    : 1,
	    startRange   : 1,
	    midRange     : 5,
	    endRange     : 1
	  });
	});

perPage: Cuantos post por pagina.

startPage: Si la paginación comienza en la primera página.

midRange: El numero en el que se resume la paginación.

Al descargarlo, incluye un CSS básico, podéis ver un ejemplo en vivo en este mismo blog, en el siguiente link.

 

Enlace para la descarga. y vista de varios ejemplos incluyendo animaciones con animate.css.

Mariano J.

Tengo un problema y es que necesito paginar comentarios y respuestas con msqly y pdo ...he intentado aplicar el ejemplo que tienes pero no me funciona .¿Me puedes ayudar? Gracias y saludos

rafa / 11-05-2018

Hola Rafa, para saber donde se encuentra el error o la solución, necesitaría poder ver el código. De todos modos te incluyo un link con el tutorial de la paginación: http://luis-almeida.github.io/jPages/download.html Si sigues con dudas, ponte en contacto conmigo. Un saludo.

Mariano J. / 11-05-2018

Gracias brother, por la ayuda...

Angel Labrada / 20-08-2018

Escribe un comentario

Tu email no se hará visible