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>

Ver ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(4 votos, promedio: 4 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

5 respuestas a “Estilo para la paginación de resultados”

  1. joserra dice:

    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/

  2. eduardo dice:

    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.

  3. Rodrigo dice:

    Me funcionó a la primera. Muchas gracias!

  4. 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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre