Hoy vamos a ver como podemos hacer una páginación con la ayuda de javascript y JQuery.
Las paginaciones se utilizan para mejorar la usabilidad y el rendimiento de una página. Su uso es habitual en foros donde se hace necesario la paginación de los post debido a su gran número. Si no hubiera paginación el tiempo de carga sería altísimo y descendería notablemente el rendimiento del portal.
Para implementar nuestra páginación será necesario tener incluido en nuestro proyecto la librería de JQuery.
Vamos a ver un ejemplo muy sencillo de implementación del script en una página HTML acompañada de AJAX para recargar el contenido correspondiente a la página seleccionada sin recargas.
Utilizaremos el siguiente código HTML:
<head> <script src="jquery.js" type="text/javascript"></script> <script src="misfunciones.js" type="text/javascript"></script> </head> <body> <select> <option>VALOR1</option> <option>VALOR2</option> <option>VALOR3</option> <option>VALOR4</option> <option>VALOR5</option> </select> <ul class="paginacion"></ul> </body>
Como podemos ver en el código, tenemos un select con unos valores y un bloque con class="paginacion" que será el bloque que contendrá las páginas que generaremos.
Utilizaremos un poco de CSS para darle algo de estilo a la lista de la paginación y a la página seleccionada.
.paginacion li{
display:inline;
list-style:none;
cursor:pointer;
}
.actual{
font-weight:bold;
text-decoration:underline;
}
Por último tan solo debemos usar el siguiente script para generar la paginación sobre el bloque mencionado y realizar las operaciones oportunas al clicar sobre cada página que es la llamada mediante AJAX a un servlet en este caso y el movimiento de las páginas.
jQuery(document).ready(
function() {
var paginasTotales=10;
var limite=0;
if (paginasTotales>=5) {limite=5;}
else {limite=paginasTotales;};
for(var i=1;i<=limite;i++){
$('.paginacion').append('<li>'+ i +'</li>');
};
$('.paginacion li:first-child').addClass('actual');
$('.paginacion li').click(function(){
var pagina=$(this).text();
if (parseInt(pagina)==1){
var i= parseInt(0);
}
else if(parseInt(pagina)==2){
var i= parseInt(-1);
}
else{
var i= parseInt(-2);
}
if (parseInt(pagina)==paginasTotales){
var i= parseInt(-4);
}
else if (parseInt(pagina)==paginasTotales-1){
var i= parseInt(-3);
}
$('.paginacion li').removeClass('actual');
$('.paginacion li').each(function(){
var calculo_paginacion = parseInt(pagina) + parseInt(i);
$(this).text(calculo_paginacion);
if(i==0){$(this).addClass('actual')};
i+=parseInt(1);
});
/* AJAX */
$.get("/MiServlet", { npag: pagina },
function(data){
$('select option').remove();
$('select').append(data);
});
});
});
Como podemos ver en el script anterior podemos seleccionar el número de páginas que queremos generar y además podemos hacer la llamada AJAX que queramos y hacer con lo devuelto lo que queramos. En este caso hemos llamado a un servlet que genera nuevas option que, a porteriori, incluimos en el select actual y borramos las antiguas.
Podemos bajar el ejemplo desde el siguiente enlace.
Espero que os haya ayudado y os sea útil mi script.