Paginación estilo Digg con MySQL y PHP

Cuando se tiene una buena cantidad de resultados es conveniente presentarlos al usuario página por página para facilitar la navegación. Esto es algo que se pregunta a menudo en los foros de PHP “Tengo una petición que me regresa muchos registros. ¿Cómo separo los resultados en varias páginas?”.

En este tutorial voy a mostrar un método para dividir los resultados en varias páginas y al final le daremos un estilo similar a Digg. Lo que queremos obtener es un listado de 12 películas por página y en la parte inferior enlaces a páginas similar al que usa Digg, que se ven así:

Para efectos de demostración voy a utilizar la base de datos Sakila que es una base de datos de ejemplo desarrollada para MySQL. Específicamente queremos mostrar la información de las películas almacenadas en la tabla film.

A continuación voy a discutir este script de ejemplo de paginación estilo Digg con MySQL y PHP. Para probarlo en su equipo deberá tener instalado Sakila. Guárdelo en una carpeta de su servidor web y cambie los datos de la conexión a la base de datos que se encuentran al comienzo:

$hostname    = 'localhost';
$username    = 'root';
$password    = '123456';
$database    = 'sakila';

Las consultas

Primero necesitamos hacer una consulta para obtener el número de registros en la tabla y lo almacenamos en una variable $filmsCount:

select count(*) filmsCount
	from film

Ahora calculamos el número máximo de páginas que podemos mostrar. Para esto utilizamos el número de registros que acabamos de obtener y lo dividimos entre el número de registros por página. Aquí estoy usando la función ceil(), que redondea el numero hacia arriba, porque también tenemos que contar la última página que puede quedar con menos registros que las demás.

$pagesCount = (int)ceil($filmsCount / $rowCount);

Ahora averiguamos en qué página estamos. En el URL va a venir un parámetro pageIndex con el índice de la página. Si no está presente suponemos que estamos en la primer página y si sobrepasa la última página suponemos que estamos en la página actual.

$pageIndex = isset($_REQUEST['pageIndex']) ? (int)$_REQUEST['pageIndex'] : 0;
if ($pageIndex >= $pagesCount)
	$pageIndex = $pagesCount - 1;

Estamos listos para obtener los registros de la página. El SELECT de MySQL tiene unos parámetros justo para esto. Se pasan con la cláusula LIMIT de esta forma

$offset = $pageIndex * $rowCount;
$sql = "
select *
	from film
	order by title
	limit $offset, $rowCount
";

$rowCount es el número de registros por página y puede ser el número que usted quiera. En el ejemplo estoy usando 12. Los registros los almaceno como objetos en un arreglo $films y luego recorro el arreglo para mostrar cada registro.

Los enlaces de las páginas

Ahora la parte más delicada: Mostrar el listado de páginas con el estilo de Digg. Vamos a crear una lista <UL> donde cada elemento va a ser un enlace a la página correspondiente.

El enlace a la página anterior es el más sencillo. Simplemente, si estamos en una página mayor a la primera mostramos el enlace:

<ul id="pages">
<?php
// Página anterior.
if ($pageIndex > 0) {
?>
	<li class="page"><a href="?pageIndex=<?php echo $pageIndex - 1 ?>">&lquo;</a></li>
<?php } ?>

Ahora mostraríamos la página actual rodeada de N páginas adelante y atrás. El número de páginas a mostrar lo guardo en la variable $pagesToShow. Entonces calculamos las páginas que se van a mostrar así:

$start = $pageIndex - $pagesToShow;
if ($start < 0)
	$start = 0;

$end = $pageIndex + $pagesToShow;
if ($end >= $pagesCount)
	$end = $pagesCount - 1;

$start y $end los usaremos luego en un ciclo; sin embargo, hay que tener en cuenta la primera y segunda página. En Digg siempre se muestran los enlaces de la primera y segunda página. No importa si uno está en la página 500, siempre se muestran. Entonces los mostramos teniendo en cuenta que no se pueden repetir después:

if ($start > 0) {
	for ($i = 0; $i < 2 && $i < $start; ++$i) {
?>
	<li class="page"><a href="?pageIndex=<?php echo $i ?>"><?php echo $i + 1 ?></a></li>
<?php
	}
}

Ahora si podemos mostrar las páginas con toda tranquilidad. Lo único que tenemos que tener en cuenta es que a la página actual no le ponemos enlace:

for ($i = $start; $i <= $end; ++$i) {
	if ($pageIndex == $i) {
?>
	<li class="page current"><?php echo $i + 1 ?></li>
<?php
	} else {
?>
	<li class="page"><a href="?pageIndex=<?php echo $i ?>"><?php echo $i + 1 ?></a></li>
<?php
	}
}

Ya vamos terminando… De forma similar a la primera y segunda página, la penúltima y última siempre se muestran. Pero tenemos que evitar repetirlas así que usamos la función max() para evitarlo:

if ($end < $pagesCount - 1) {
	for ($i = max($pagesCount - 2, $end + 1); $i < $pagesCount; ++$i) {
?>
	<li class="page"><a href="?pageIndex=<?php echo $i ?>"><?php echo $i + 1 ?></a></li>
<?php
	}
}

Y para finalizar mostramos el enlace a la página siguiente que es bastante sencillo y cerramos el <UL>:

<?php
// Siguiente página
if ($pageIndex < $pagesCount) {
?>
	<li class="page"><a href="?pageIndex=<?php echo $pageIndex + 1 ?>">&gt;</a></li>
<?php } ?>
</ul>

Ahora necesitamos algo de CSS para que se parezca al de Digg. Lo que tenemos que hacer cambiar la lista de dirección vertical a horizontal con un display: inline; para los elementos, agregar los bordes, unos paddings y estamos listos. Este es el código CSS que yo utilicé en el ejemplo:

#pages {
	clear: both;
	text-align: center;
}
#pages li {
	display: inline;
	padding: 3px 6px 4px;
}
#pages li.page {
	border: 1px solid #CCC;
}
#pages li.current {
	background-color: #CCC;
}

El resultado final es una página como la de la captura de pantalla en la que podemos ver 12 películas por páginas y usar los enlaces de la parte inferior para navegar por las páginas.

En una aplicación más grande, la lógica necesaria para mostrar los enlaces de las páginas debería encapsularse en una clase para evitar errores cuando se desee reutilizar en otro listado y el HTML podría guardarse en una plantilla separada. Este ejercicio se lo dejo quienes lean este blog… si, cualquiera de ustedes tres.

ACTUALIZACIÓN 2009/05/29: Como correctamente apunta Jairo, a los enlaces de la paginación hay que agregarle cualquier parámetro que modifique los resultados del SELECT. Por ejemplo, si hay que filtrar los films por el precio deberíamos pasarlo al final del URL así:

<?php
// Siguiente página
if ($pageIndex < $pagesCount) {
?>
	<li class="page"><a href="?pageIndex=<?php echo $pageIndex + 1,
		'&price=', $price ?>">&gt;</a></li>
<?php } ?>
</ul>

<!--[if IE]>
<script type="text/javascript" src="fix_eolas.js"
	defer="defer"></script>
<![endif]-->
</head>

var objects = document.getElementsByTagName("object");

for (var i=0; i<objects.length; i++)
	objects[i].outerHTML = objects[i].outerHTML;