Actualizado el domingo, 19 junio, 2016
Paginador. Podemos mostrar un subconjunto de cosas y permitirle al usuario navegar entre ellos de forma cómoda y simple. El no utilizar paginación, puede llevar a mostrar un conjunto extremadamente grande de datos, como así también congestionar la base de datos y la red. Crearemos una tabla llamada «artículos», que posee tres columnas: id, titulo y cuerpo.
Para poder mostrar una lista de páginas por las cuales el usuario puede navegar, necesitamos conocer 3 cosas:
- La página actual en la que se encuentra el usuario
- El número total de artículos en la base de datos
- El número de artículos por página que vamos a mostrar
Definiremos cómo vamos a mostrar la paginación. Existen varios formatos, de los cuales tenemos que elegir uno:
- Mostrar botones «Atrás / Adelante» o «Antiguos / Más nuevos»
- Una lista con todas las páginas que existen
- Una lista que muestra la página actual, un par de páginas previas y posteriores, la primera y la última
En este articulo, optaremos por la tercer opción.
La conexión con la base de datos la vamos a realizar con el archivo que creamos en el artículo «Cargar combos en cascada con jQuery, PHP y MySQL», con el cual hacemos una consulta para obtener cuántos artículos hay en la base de datos.
$sql = "SELECT COUNT(*) AS total
FROM articulos";
$db = obtenerConexion();
$resultado = ejecutarQuery($db, $sql);
$fila = $resultado->fetch_assoc();
$articulosTotales = $fila['total'];
cerrarConexion($db, $resultado);Buscamos cuántas páginas hay en total.
$articulosPorPagina = 2; $paginasTotales = ceil($articulosTotales / $articulosPorPagina);
Cuando pulsemos uno de los enlaces de la página, lo que se hace es llamar al mismo archivo, pasándole por GET el id de la página. Por tanto, tenemos que saber cuál es el id que está llegando por GET.
$paginaActual = 0;
if(isset($_GET['pagina'])){
// en caso que haya datos, los casteamos a int
$paginaActual = (int)$_GET['pagina'];
}
// el número de la página actual no puede ser menor a 0
if($paginaActual < 1){
$paginaActual = 1;
}
else if($paginaActual > $paginasTotales){ // tampoco mayor la cantidad de páginas totales
$paginaActual = $paginasTotales;
}Obtenemos los artículos a mostrar en la página.
// obtenemos cuál es el artículo inicial para la consulta
$articuloInicial = ($paginaActual - 1) * $articulosPorPagina;
// buscamos en la base de datos todos los artículos que correspondan a la página
// la sentencia LIMIT hace que se limite la cantidad de registros devueltos
// hay que indicarle el dato inicial y la cantidad de registros que debe devolver
$sql2 = 'SELECT `titulo`, `cuerpo`
FROM `articulos`
ORDER BY `id`
LIMIT ' . $articuloInicial . ', ' . $articulosPorPagina;
$db = obtenerConexion();
$articulos = ejecutarQuery($db, $sql2);Definimos nuestra página.
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Tuweb - Paginación</title>
</head>
<link rel="stylesheet" href="styles.css">
<body>
<div class="contenedor">
<?php
// mostramos los artículos de la página
while($fila = $articulos->fetch_assoc()){
echo '<div><h2>' . $fila['titulo'] . '</h2></div>';
echo '<div>' . $fila['cuerpo'] . '</div>';
}
cerrarConexion($db, $articulos);
echo '<div class="paginacion">';
// mostramos la paginación
for ($i=1; $i <= $paginasTotales; $i++) {
// para identificar la página actual, le agregamos una clase
// para darle un estilo diferente
if($i == $paginaActual){
echo '<span class="pagina actual">' . $i . '</span>';
}
// sólo vamos a mostrar los enlaces de la primer página,
// las dos siguientes, las dos anteriores
// y la última
else if($i == 1 || $i == $paginasTotales || ($i >= $paginaActual - 2 && $i <= $paginaActual + 2)){
echo '<a href="?pagina=' . $i . '" class="pagina">' . $i . '</a>';
}
}
echo '</div>'
?>
<div id="tuweb">
Tu pagina web <a href="http://www.tuweb.com">www.tuweb.com</a>
</div>
</div>
</body>
</html>Aplicamos un estilo a la paginación.
.pagina {
padding: 0px 9px;
margin-right: 4px;
border-radius: 3px;
border: solid 1px #c0c0c0;
background: #e9e9e9;
box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
font-size: .875em;
font-weight: bold;
text-decoration: none;
color: #717171;
text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}
.pagina:hover, .pagina.gradient:hover {
background: #fefefe;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);
}
.pagina.actual {
border: none;
background: #616161;
box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
color: #f0f0f0;
text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}