En este tutorial es un poco mas complejo que los anteriores.
Veremos como realizar una paginacion con php y mysql.
Tambien veremos como agregarle un poco mas de estilo.
¿A que se le llama paginación? Esto es simplemente el índice que aparece abajo del todo que algunas veces contiene números y otras no, y nos sirve para cambiar de página. Es muy útil cuando tenemos muchos datos para mostrar y ya resulta feo que aparezca todo en la misma página.
La estructura más comun suele contar con 2 botones (Previous y next)
más otros tantos con los números de las páginas que tengamos(variable
segun la cantidad de datos). El número resaltado indica en que página
nos encontramos actualmente , y si no hay más páginas hacia abajo o
hacia arriba se deshabilitaran los botones de Previous y Next
respectivamente. Por último tenemos el selector de números que nos
permitira saltar directamente a cualquier página sin necesidad de pasar
una a una.
Para diseñar esta estructura usaremos una lista HTML (<ul>) que
a su vez contendra tantos elementos de lista (<li>) como sea
necesario. A cada lista le vamos a asignar un ID que definirá su estilo.
A continuación paso a explicar más detalladamente.
Paginación al estilo de Flickr:
En este caso vamos a diseñar la paginación al estilo de Flickr y se verá del siguiente modo:
El código HTML que vamos a usar es muy simple y nos servira como esqueleto para cualquier estilo , ya que solo necesitaremos cambiar el ID de la lista que en el siguiente caso será “pagination-flickr”.
<ul id="pagination-flickr">
<li class="previous-off">«Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=8">Next »</a></li>
</ul>
Ahora solo nos queda agregar el código CSS para darle estilo a nuestra lista
/* ------------- Pagination: Flickr ----------- */ /* -------------------------------------------- */ ul { border:0; margin:0; padding:0; } #pagination-flickr li
{ border:0; margin:0; padding:0;
font-size:11px; list-style:none; /* savers */ float:left; }
#pagination-flickr a
{ border:solid 1px #DDDDDD; margin-right:2px; }
#pagination-flickr .previous-off, #pagination-flickr .next-off
{ color:#666666; display:block; float:left; font-weight:bold; padding:3px 4px; }
#pagination-flickr .next a, #pagination-flickr .previous a
{ font-weight:bold; border:solid 1px #FFFFFF; }
#pagination-flickr .active
{ color:#ff0084; font-weight:bold; display:block; float:left; padding:4px 6px; }
#pagination-flickr a:link, #pagination-flickr a:visited
{ color:#0063e3; display:block; float:left; padding:3px 6px; text-decoration:none; }
#pagination-flickr a:hover
{ border:solid 1px #666666; }
Paginación al estilo de DIGG:
La estructura como pueden ver es la misma. Solo cambiamos el atributo ID de la lista.
<ul id="pagination-digg"> <li class="previous-off">«Previous</li> <li class="active">1</li> <li><a href="?page=2">2</a></li> <li><a href="?page=3">3</a></li> <li><a href="?page=4">4</a></li> <li><a href="?page=5">5</a></li> <li><a href="?page=6">6</a></li> <li><a href="?page=7">7</a></li> <li class="next"><a href="?page=8">Next »</a></li> </ul>
/* -------------------------------------------- */
/* ----------- Pagination: Digg Style --------- */
/* -------------------------------------------- */
ul { border:0; margin:0; padding:0; }
#pagination-digg li
{ border:0; margin:0; padding:0;
font-size:11px; list-style:none; /* savers */ float:left; }
#pagination-digg a
{ border:solid 1px #9aafe5; margin-right:2px; }
#pagination-digg .previous-off,
#pagination-digg .next-off
{ border:solid 1px #DEDEDE; color:#888888;
display:block; float:left; font-weight:bold; margin-right:2px; padding:3px 4px; }
#pagination-digg .next a,
#pagination-digg .previous a { font-weight:bold; }
#pagination-digg .active
{ background:#2e6ab1; color:#FFFFFF; font-weight:bold;
display:block; float:left; padding:4px 6px; /* savers */ margin-right:2px; }
#pagination-digg a:link,
#pagination-digg a:visited
{ color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:none; }
#pagination-digg a:hover
{ border:solid 1px #0e509e; }
Estilo de paginación limpio:
Para crear un estilo un poco más limpio y menos cargado podemos usar el siguiente codigo CSS. Recordar que tienen que cambiar el ID del elemento <ul> por “pagination-clean” :
/* ------------- Pagination: Clean ------------ */ /* -------------------------------------------- */ #pagination-clean li
{ border:0; margin:0; padding:0; font-size:11px; list-style:none;
/* savers */ float:left; }
/* savers #pagination-clean li,*/
#pagination-clean a
{ border-right:solid 1px #DEDEDE; margin-right:2px; }
#pagination-clean .previous-off, #pagination-clean .next-off
{ color:#888888; display:block; float:left; font-weight:bold; padding:3px 4px; }
#pagination-clean .next a, #pagination-clean previous a
{ border:none; font-weight:bold; }
#pagination-clean .active
{ color:#000000; font-weight:bold; display:block; float:left; padding:4px 6px;
/* savers */ border-right:solid 1px #DEDEDE; }
#pagination-clean a:link,
#pagination-clean a:visited
{ color:#0e509e; display:block; float:left;
padding:3px 6px; text-decoration:underline; }
#pagination-clean a:hover
{ text-decoration:none; }
Con esto ya tenemos unas listas y su correspondientes estilos para
que nuestra paginación quede de una forma profesional. El siguiente paso
es añadir el codigo PHP necesario para crear el índice de acuerdo a la
cantidad de datos que tengamos y poder así modificar la consulta SQL
para que nos muestre ciertos resultados. Para las conexiones a la base
de datos voy a seguir los pasos descritos en este artículo.
Para empezar necesitamos hacer 2 consultas SQL en lugar de 1. La primera va a ser para recuperar TODOS
los datos y asi poder calcular cuantas páginas vamos a necesitar. La
segunda consulta va a mostrar un rango de resultados según en que página
estemos.
Por ejemplo digamos que queremos mostrar una tabla con datos de
películas donde nos muestre el nombre de la película, el año de creación
, etc. La tabla SQL esta compuesto por los siguientes campos:
idPelicula(int(5)), nombre(VARCHAR(150)), director(VARCHAR(100)),
anio(DATE).
A continuación como seria el código:
<?php//INCLUYO LA HOJA DE ESTILOS en el header si es posible?><link href="css/paginacion.css" type="text/css" rel="stylesheet"><?phpinclude('config/db.php');$conn=get_db_conn(); //AL PRINCIPIO COMPRUEBO SI HICIERON CLICK EN ALGUNA PÁGINA if(isset($_GET['page'])){ $page= $_GET['page'];}else{ //SI NO DIGO Q ES LA PRIMERA PÁGINA $page=1;} //ACA SE SELECCIONAN TODOS LOS DATOS DE LA TABLA$consulta="SELECT * FROM peliculas";$datos=mysql_query($consulta,$conn); //MIRO CUANTOS DATOS FUERON DEVUELTOS$num_rows=mysql_num_rows($datos); //ACA SE DECIDE CUANTOS RESULTADOS MOSTRAR POR PÁGINA , EN EL EJEMPLO PONGO 15$rows_per_page= 15; //CALCULO LA ULTIMA PÁGINA$lastpage= ceil($num_rows / $rows_per_page); //COMPRUEBO QUE EL VALOR DE LA PÁGINA SEA CORRECTO Y SI ES LA ULTIMA PÁGINA$page=(int)$page;if($page > $lastpage){ $page= $lastpage;}if($page < 1){ $page=1;} //CREO LA SENTENCIA LIMIT PARA AÑADIR A LA CONSULTA QUE DEFINITIVA$limit= 'LIMIT '. ($page -1) * $rows_per_page . ',' .$rows_per_page; //REALIZO LA CONSULTA QUE VA A MOSTRAR LOS DATOS (ES LA ANTERIO + EL $limit)$consulta .=" $limit";$peliculas=mysql_query($consulta,$conn); if(!$peliculas){ //SI FALLA LA CONSULTA MUESTRO ERROR die('Invalid query: ' . mysql_error());}else{ //SI ES CORRECTA MUESTRO LOS DATOS ?> <table> <thead> <tr><th>Título</th><th>Director</th><th>
Año de producción</th></tr> </thead> <tbody> <?php while($row = mysql_fetch_assoc($peliculas)) { ?> <tr><td><?php echo $row['nombre']; ?> </td><td> <?php echo $row['director']; ?> </td><td> <?php echo $row['anio']; ?> </td></tr> <?php } ?> </tbody> </table><?php //UNA VEZ Q MUESTRO LOS DATOS TENGO Q MOSTRAR EL BLOQUE DE PAGINACIÓN SIEMPRE Y CUANDO HAYA MÁS DE UNA PÁGINA if($numrows != 0) { $nextpage= $page +1; $prevpage= $page -1; ?><ul id="pagination-digg"><?php //SI ES LA PRIMERA PÁGINA DESHABILITO EL BOTON DE PREVIOUS, MUESTRO EL 1 COMO ACTIVO Y MUESTRO EL RESTO DE PÁGINAS if ($page == 1) { ?> <li class="previous-off">« Previous</li> <li class="active">1</li> <?php for($i= $page+1; $i<= $lastpage ; $i++) {?> <li><a href="busquedas.php?page=<?php echo $i;?>"><?php echo $i;?></a></li> <?php } //Y SI LA ULTIMA PÁGINA ES MAYOR QUE LA ACTUAL MUESTRO EL BOTON NEXT O LO DESHABILITO if($lastpage >$page ) {?> <li class="next"><a href="busquedas.php?page=<?php echo $nextpage;?>" >Next »</a></li><?php } else {?> <li class="next-off">Next »</li> <?php } } else { //EN CAMBIO SI NO ESTAMOS EN LA PÁGINA UNO HABILITO EL BOTON DE PREVIUS Y MUESTRO LAS DEMÁS ?> <li class="previous"><a href="busquedas.php?page=<?php echo $prevpage;?>">« Previous</a></li><?php for($i= 1; $i<= $lastpage ; $i++) { //COMPRUEBO SI ES LA PÁGINA ACTIVA O NO if($page == $i) { ?> <li class="active"><?php echo $i;?></li><?php } else { ?> <li><a href="busquedas.php?page=<?php echo $i;?>" ><?php echo $i;?></a></li><?php } } //Y SI NO ES LA ÚLTIMA PÁGINA ACTIVO EL BOTON NEXT if($lastpage >$page ) { ?> <li class="next"><a href="busquedas.php?page=<?php echo $nextpage;?>">Next »</a></li><?php } else { ?> <li class="next-off">Next »</li><?php } } ?></ul></div><?php } }?> Seguramente esta última parte del codigo se pueda mejorar ya que la
escribí un poco “rapido”, así que estoy abierto a sugerencias. De todas
formas a mi me funciona todo correctamente. Espero que les haya servido
de ayuda, ya que en su día me costo mucho encontrar un buen tutorial
sobre la paginación y ninguno de los que encontre venia completo
No hay comentarios :
Publicar un comentario