Estilo para la paginación de resultados
Cuando tenemos muchos registros y no queremos mostrar una lista de registro muy larga podemos usar paginación para mostrar los resultados de la consulta en distintas páginas.
En muchas ocasiones, cuando se presentan en una página web registros de una base de datos, se deberían mostrar demasiados registros como para colocarlos todos en una única página. En estas ocasiones se suele paginar los resultados, quizás cientos, en distintas páginas con conjuntos de registros mucho menos numerosos. Por ejemplo, podríamos presentar los resultados en páginas de 10 elementos o 20, dependiendo de nuestras intenciones y el tipo de datos que se estén presentando. Este efecto lo habremos podido observar repetidas veces en los buscadores.
En este artículo únicamente detalleremos un posible estilo de diseño para el paginador, es decir, los números que aparecen arriba o abajo de los registros encontrados.
Si desea obtener más información sobre la paginación de registros en términos de PHP y MySQL puede visitar los siguientes artículos:
Paginación de resultados con PHP
Paginación de resultados con PHP versión 2
Paginación de consultas con PHP, MySQL y AJAX
Para añadir estilos a estos paginadores de resultados debemos aplicar técnicas CSS y podemos conseguir efectos como por ejemplo el de la imagen siguiente:
En nuestra hoja de estilos deberemos tener algo como esto:
.pagination { height: 36px; margin: 18px 0; } .pagination ul { border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); display: inline-block; margin-bottom: 0; margin-left: 0; } .pagination li { display: inline; } .pagination a { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #DDDDDD; border-style: solid; border-width: 1px 1px 1px 0; float: left; line-height: 34px; padding: 0 14px; text-decoration: none; } .pagination a:hover, .pagination .active a { background-color: #F5F5F5; } .pagination .active a { color: #999999; cursor: default; } .pagination .disabled a, .pagination .disabled a:hover { background-color: transparent; color: #999999; cursor: default; } .pagination li:first-child a { border-left-width: 1px; border-radius: 3px 0 0 3px; } .pagination li:last-child a { border-radius: 0 3px 3px 0; } .pagination-centered { text-align: center; } .pagination-right { text-align: right; }
Esta hoja de estilo la deberemos incluir en nuestro <head> de la forma habitual y seguidamente en el <body> añadir los siguientes tags:
<div class="pagination"> <ul> <li><a href="?page=3">Anterior</a></li> <li><a href="?page=1">1</a></li> <li><a href="?page=2">2</a></li> <li><a href="?page=3">3</a></li> <li><a>4</a></li> <li><a href="?page=5">5</a></li> <li><a href="?page=6">6</a></li> <li><a href="?page=10">10</a></li> <li><a href="?page=5">Siguiente</a></li> </ul> </div>
hola jose: mi nombre es joserra y estuve intentando hacerlo tal y como lo explicas en el post pero me fue imposible. (creo que no supe hacerlo)
te agradeceria te pusieras en contacto conmigo para ver si somos capaces de ver que hice mal «gracias»
aqui te dejo mi blog para que si puedes le eches un vistazo : https://narcorock.blogspot.com/
Hola,
Para este tipo de ayudas que se salen de lo que hay en el blog debe enviarnos un ticket al centro de soporte situado en:
https://www.jamodules.com/es/soporte
y allí ya le indicaremos como podemos proceder para resolver este caso particular.
Saludos cordiales!
La verdad es que la parte de paginación esta bárbara, el único detalle que a lo mejor se puede cambiar es cuando la paginacion es dinámica y no estática como pareciera ser el caso que vos presentas.
Me funcionó a la primera. Muchas gracias!
muy buenos dias acabo de enterarme de tu web y la verdad es que me parece super bueno no sabia de mas personas interesadas en estos temas, aqui tienes un nuevo lector que seguira visitandote semanalmente.