Hoy quiero compartir con vosotros este paginador que creé hace tiempo basándome en Prototype.
Después de mucho buscar por internet no encontré ninguno que se ajustara a lo que yo necesitaba así que me puse manos a la obra y lo hice yo mismo.
El concepto:
La idea es paginar cualquier tipo de estructura que se repita.
Su uso:
var pager=new PageController(idcontenedor,selector elementos paginacion,idpaginador,numporpagina);
Todo se entiende mejor con un ejemplo:
imaginemos que tenemos una lista de imagenes con titulo y queremos paginarla a 5 por página:
<ul>
<li>imagen1 <img src="imagen.jpg"/></li>
<li>imagen2 <img src="imagen.jpg"/></li>
<li>imagen3 <img src="imagen.jpg"/></li>
<li>imagen4 <img src="imagen.jpg"/></li>
<li>imagen5 <img src="imagen.jpg"/></li>
<li>imagen6 <img src="imagen.jpg"/></li>
<li>imagen7 <img src="imagen.jpg"/></li>
<li>imagen8 <img src="imagen.jpg"/></li>
<li>imagen9 <img src="imagen.jpg"/></li>
</ul>
La estructura que se repite son <li> y se repiten dentro de una etiqueta ul, necesitamos poner un id a la etiqueta ul, tenemos que añadir al final algún elemento con id para usar de paginador, necesitamos las librerias de prototype (la vamos a cojer de google api) y la libreria del paginador, y por último llamar al paginador en el evento dom:loaded (para asegurarnos que no se llama hasta que todo el contenido esté cargado).
El código quedaría así:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ejemplo 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
<script language="javascript" type="text/javascript" src="paginador.js"></script>
<script>
document.observe("dom:loaded",function(e){
var pager=new PageController('#lista','li','paginador',5);
});
</script>
</head>
<body>
<ul id="lista">
<li>imagen1 <img src="imagen.jpg"/></li>
<li>imagen2 <img src="imagen.jpg"/></li>
<li>imagen3 <img src="imagen.jpg"/></li>
<li>imagen4 <img src="imagen.jpg"/></li>
<li>imagen5 <img src="imagen.jpg"/></li>
<li>imagen6 <img src="imagen.jpg"/></li>
<li>imagen7 <img src="imagen.jpg"/></li>
<li>imagen8 <img src="imagen.jpg"/></li>
<li>imagen9 <img src="imagen.jpg"/></li>
</ul>
<div id="paginador"></div>
</body>
</html>
Aquí podeis ver el resultado además de otros ejemplos.
La librería crea automáticamente dentro del elemento paginador tres elementos, uno para los enlaces siguiente y anterior y otro para la numeración de páginas, y les asigna las clases pag_ant,pag_sig y numeros_pag respectivamente (jugando con el css ya podemos hacer nosotros lo que queramos con el paginador)
Aquí podéis descargar el paginador y los ejemplos:
paginador prototype
Espero que os sirva, un saludo.
) y¡TACHAAANN! este es el resultado de unas pocas de horas de trabajo: