Paginación con PHP y MySQL + 3 estilos
Categories: MySQL, PHP, Tutoriales - Tags: css, MySQL, paginacion, PHPEn este tutorial les voy a enseñar el método que utilizo para hacer paginación en mis diseños.Pero para empezar ¿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.
Típica estructura:
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”.
1 2 3 4 5 6 7 8 9 10 11 | <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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* -------------------------------------------- */ /* ------------- 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.
1 2 3 4 5 6 7 8 9 10 11 | <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> |
Y nuevamente añadiremos el estilo correspondiente. Como vereis los elementos son los mismos, solo cambiamos algunos atributos:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* -------------------------------------------- */ /* ----------- 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” :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* -------------------------------------------- */ /* ------------- 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | <?php //INCLUYO LA HOJA DE ESTILOS ?> <link href="css/paginacion.css" type="text/css" rel="stylesheet"> <? include('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> <? while($row = mysql_fetch_assoc($peliculas)){ ?> <tr><td><? echo $row['nombre']; ?> </td><td> <? echo $row['director']; ?> </td><td> <?echo $row['anio']; ?> </td></tr> <? } ?> </tbody> </table> <? //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"><? //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> <? for($i= $page+1; $i<= $lastpage ; $i++){?> <li><a href="busquedas.php?page=<? echo $i;?>"><? echo $i;?></a></li> <? } //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=<? echo $nextpage;?>" >Next »</a></li><? }else{?> <li class="next-off">Next »</li> <? } } 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=<? echo $prevpage;?>" >« Previous</a></li><? for($i= 1; $i<= $lastpage ; $i++){ //COMPRUEBO SI ES LA PÁGINA ACTIVA O NO if($page == $i){ ?> <li class="active"><? echo $i;?></li><? }else{ ?> <li><a href="busquedas.php?page=<? echo $i;?>" ><? echo $i;?></a></li><? } } //Y SI NO ES LA ÚLTIMA PÁGINA ACTIVO EL BOTON NEXT if($lastpage >$page ){ ?> <li class="next"><a href="busquedas.php?page=<? echo $nextpage;?>">Next »</a></li><? }else{ ?> <li class="next-off">Next »</li><? } } ?></ul></div><? } } |
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. Un saludo!!!
deberias pulir un poco mas tu codigo, ademas falta que cerres una llave }.
Y corregi tu mysql_fecth_assoc
Concuerdo con Daniel. Pero de todas maneras me ayudó mucho adaptandolo a mi propio código. Ahora lo modificaré para todo tipo de consultas en php. Gracias por el tutorial.
me da un error pero no logro encontrar en que parte
Por primera vez un script tuyo no me funcionó, voy a intentarlo con tu ejemplo a ver que hice mal!
Cualquier cosa escriban el error que les da a ver si logramos desifrarlo. En esta epoca andaba cambiado de plugin para mostrar código en wordpress y a veces se come algun signo que simple vista no veo.
Saludos!
Hola Damian, mirá, volví a probar pero con tu ejemplo, cree la base con los campos como indicas y me da esto (ni idea cuál es el error)
$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 ?>
T?tuloDirectorA?o de producci?n
* « Previous
* 1
*
* $page ){?> Next »
* Next »
* « Previous
*
*
$page ){ ?>
Hola, despues de dar algunas vueltas descubri cual es el problema, es en el archivo de conección con la base de datos especificamente en PROTEGER SQL INJECT, no sé como resolverlo asi que lo quite, espero que no pase nada!
Efectivamente hay un error en mi otro post acerca de como usar la función cleanQuery
function cleanQuery
Busca la parte de if (phpversion() <= '4.3.0')
y cambiala por if (phpversion() >= '4.3.0')
Saludos y disculpen el error.
hola amigos encontre algunos errores y los corregi. ya todo me esta funcionando bn..
inserte unos datos son 84 o algo asi. son datos a la carrera (copiar y pegar).
Descarguen el zip y lo veran. ah!!!!! algunas funciones las elimine no vi necesidad de dejarlas. y modifique algunas. Saludos desde colombia
http://www.mediafire.com/?p1hakcyeygabr4q
gracias jorch… me ayode del aporte de ambos, ahora a seguir ayundo a los demas. (Y)
gracias me has salvadoo, me funciono con tus correcciones
Gracias Damián, ahora si funciono a la perfección!!
la de jorge si funciona
Jorge-1409
informacion al personal discapacitado de las fuerzas armadas del peru
hola me parece genial tu tutorial , pero quiero hacerte una consulta cuando traes la data y realizas un select * from peliculas para ver la cantidad de paginas no seria mas optimo realizar un select count(*) from peliculas , ya que al realizar esa consulta te traes toda la data de la tabla si existen 10000000 de datos tendrias un problema de performance.. me gustaria q comentes algo de eso por favor.. a ver si estoy en lo cierto.
Estás totalmente en lo cierto. La primera regla de oro de un programador profesional de bases de datos es precisamente obtener SOLAMENTE la información que se necesite y ni un dato más. Si cuentas registros, DEBES usar la funcion COUNT. Otra regla es que es mucho mejor hacer muchos selects pequeñitos que uno solo muy grande.
como lo adapto a un paginado basico que ya tenia en mi sitio??
Como podría establecer un orden de resultados, es decir, que aparezcan en varias columnas, en vez de todo en horizontal. Si sacas 12 registros de la tabla, pues ordenarlos de 4 en 4,
Hola, el error esta en el nombre de la variable para el contador. En la seccion de paginacion se utiliza la variable $numrows mientras que en el inico del script se utiliza la variable $num_rows para saber el total de registros. ademas de que le sobr un '}'
existen errores para el codigo inicial al principio me salia:
$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 ?>
T?tuloDirectorA?o de producci?n
pero descubri q cambiando como dice DAMIAN
en la pagina db.php en la linea
function cleanQuery
Busca la parte de if (phpversion() <= '4.3.0')
y cambiala por if (phpversion() >= '4.3.0')
sin el punto y coma
xq ami me salia asi : (phpversion()>>= '4.3.0');
entonces corregi el error
ADEMAS alberto encontro otro error en la paginacion.php
resulta q en la linea donde dice
if($numrows!=0)
cambiarla por la linea:
if($num_rows!=0)
es xq las variables son diferentes x el simple echo de escribir mal.
y como PUNTO FINAL
a las lineas:
</tbody>
</table>
<?php
despues del php le hace falta un corchete para que cierre la consulta del ELSE
despues de eso el resto solo es mover la BD que desean mostrar
Me sirvió muchísimo el ejemplo que pusiste. Muchísimas gracias
Me sirvio full todo ok. pero tengo una duda que pasa si tengo miles de resultados los números de la paginacion s me hacen por ejemplo 100 y me muestra toditos como se podria arreglar para q muestre una línea y a medida q uno avanza muestra los otros.
Les mando el ejemplo para que lo vean como va la cosa http://www.bibliocomunidad.com/web2/catcomp.php
Me sirvio full todo ok. pero tengo una duda que pasa si tengo miles de resultados los números de la paginacion s me hacen por ejemplo 100 y me muestra toditos como se podria arreglar para q muestre una línea y a medida q uno avanza muestra los otros.
gracias por los métodos yo tenia uno mas complejo y menos configurable, voy a probarlo para ver que tal me funciona ; )
Excelente tutorial,pero meda un error:
Invalid query: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'LIMIT 0,5' at line 1
les agradecere mucho su ayuda, creo que el error es al agregar el limte + la cnsulta
Una observación, esta línea:
$limit= 'LIMIT'. ($page -1) * $rows_per_page . ',' .$rows_per_page;
Debería contener un espacio tras el LIMIT, para que no haya problemas
$limit= 'LIMIT '. ($page -1) * $rows_per_page . ',' .$rows_per_page;
Muy útil el código, gracias
Invalid query: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'LIMIT 0,5' at line 1
les agradecere mucho su ayuda
Amigos, a mi me funcionó de maravillas y creo que me vendrá de pelos para más de algún proyecto. Si a algunos no les funciona quizás es porque el volcado de la base de datos está con errores; le falta una comilla simple, tienen que buscar. Corregí el problema y cero rollo. Miren, el problema es éste:
'Jorge-1409 <— le falta la comila. Debe quedar así:
'Jorge-1409'
Y listo!
Ah, por cierto, excelente el blog! Felicitaciones, ya está entre mis favoritos!
Saludos!
Hola gente. me funciono 10puntos, ahora tengo una consulta como se podria hacer cuando son muchos registros y debe poner varias paginas para que trabaje tipo la paginacion de google por ejemplo?.
saludos
MUY BUEN EJEMPLO PERO NO ME FUNCIONO A LA PERFECCION.
$lastpage){ $page= $lastpage; } if($page < 1){ $page=1; } //CREO LA SENTENCIA LIMIT PARA AÑADIR A LA CONSULTA QUE DEFINITIVA $limit= 'SELECT * FROM '.$GLOBALS['DB_TBL'].' 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); if(!$peliculas){ //SI FALLA LA CONSULTA MUESTRO ERROR die('Invalid query: ' . mysql_error()); }else{ //SI ES CORRECTA MUESTRO LOS DATOS ?>
ESTE ES EL ERROR//
Hola, como puedo poner esto ? me explican ?
hola amigos el error del codigo esta en la linea 64: esta if($numrows != 0){
y deberia de ser if($num_rows != 0){
por eso es q a algunos no les corre.
me tome la molestia de pulir el codigo y crear una sola secuencia de php. haber si les gusta. particularmente soy nuevo en php pero puedo entender mejor el codigo de esta manera:
<?php
/* estos parametro no modifique */
header('Cache-Control: no-cache'); // no uso cache
header('Pragma: no-cache');
date_default_timezone_set("America/Lima"); //defino el rango horario
include "../tcd/config.php"; //cargo mis funcones
include "../tcd/funciones.php"; //cargo mis funcones
//checarSeccion('../logout.php');
//ojo paaginador
if (isset($_GET['page'])) {
$page = $_GET['page'];
} else {
$page = 1;
}
$consulta = "SELECT * FROM familia";
$datos = mysql_query($consulta);
$num_rows = mysql_num_rows($datos);
$rows_per_page = 15;
$lastpage = ceil($num_rows / $rows_per_page);
$page = (int) $page;
if ($page > $lastpage) {
$page = $lastpage;
}
if ($page < 1) {
$page = 1;
}
$limit = ' LIMIT ' . ($page – 1 ) * $rows_per_page.' , ' . $rows_per_page . ' ';
$consulta .= $limit;
$peliculas = mysql_query($consulta);
if (!$peliculas) {
! die('Invalid query: ' . mysql_error());
} else {
echo '
<html><head><link href="../css/lista.css" rel="stylesheet" type="text/css" />
</head><body><table><thead>
<tr><th>Cod</th><th>Director</th></tr></thead>
<tbody>';
while ($row = mysql_fetch_assoc($peliculas)) {
echo '<tr><td>' . $row['idfamilia'] . '</td>
<td>' . $row['fam_nombre'] . ' </td></tr>';
}
echo '</tbody></table>';
if ($num_rows != 0) {
$nextpage = $page + 1;
$prevpage = $page – 1;
echo '<ul id="pagination-clean">';
if ($page == 1) {
echo '<li class="previous-off">« Previous
<li class="active">1';
for ($i = $page + 1; $i <= $lastpage; $i++) {
$tcd.= '<a href="frmlstarticulos.php?page=' . $i . '>' . $i . '';
}
if ($lastpage > $page) {
echo '<li class="next"><a href="frmlstarticulos.php?page=' . $nextpage . '" >Next »';
} else {
echo '<li class="next-off">Next »';
}
} else {
echo '<li class="previous"><a href="frmlstarticulos.php?page=' . $prevpage . '" >« Previous';
for ($i = 1; $i <= $lastpage; $i++) {
if ($page == $i) {
echo '<li class="active">' . $i . '';
} else {
echo '<a href="frmlstarticulos.php?page=' . $i . '" >' . $i . '';
}
}
if ($lastpage > $page) {
echo '<li class="next"><a href="frmlstarticulos.php?page=' . $nextpage . '">Next »';
} else {
echo '<li class="next-off">Next »';
}
}
echo '</div>';
}
echo '</body></html>';
}
?>
Hola a todos, el código me fue útil después de algunas modificaciones para adaptarlo a lo que necesitaba. sin embargo no consigo que aparezca centrado, se va todo al lado izquierdo. alguien puede decirme la solución a esto?
Haciendo algunos ajustes y funciona muy bien
Hola, muchas gracias por el tutorial, lo adapte y me sirvió muchisimo.
Saludos de Lima, Perú
Martín