Hoy voy a explicaros cómo hacer, de una manera simple y rápida, una paginación para vuestra página web o aplicación de resultados.
Hay momentos en los que necesitamos mostrar algún tipo de contenido en nuestra web. Pueden ser imágenes, archivos o datos procedentes de una base de datos.
Pero claro, si tenemos una tabla con 600 filas de datos, no es muy correcto mostrarlas todas juntas en una sola página. Por eso , lo correcto es paginarla.
Y qué es paginar?
Muy simple, es hacer esto:
Supongo que no es necesario que os lo explique, no? Bien. Pues ahora vamos a ver cómo se hace.
1. Nuestra Base de Datos para paginar.
Para este ejemplo, voy a usar la base de datos para «estudiantes» SAKILA. Te la puedes descargar desde este link:
Es esta imágen puedes ver la estructura de esta base de datos .
Es una bd relacionada con múltiples conexiones entre tablas que te irá estupendamente para realizar tus pruebas .
En este caso utilizaremos la tabla «actores» para mostrar todo el contenido de esa tabla (Nombre y Apellido), que llega a más de 200 registros. Los mostraremos en grupos de 18 resultados por página. Puedes cambiarlo o adaptarlo a tus necesidades.
Empecemos!!
El sistema es muy simple y muy lógico.
- Nos conectamos a la base de datos.
- Contamos cuántos registros tenemos en la tabla que necesitamos.
- Los dividimos entre la cantidad que queremos mostrar por página.
- Los mostramos junto con los botones de navegación.
Lo primero que hatremos será crear las 3 funciones PHP que necesitamos para esta tarea. Una para conectarse a la base de datos , otra para contar cuántos actores tenemos en nuestra tabla y la que nos devolverá la lista de registros por cada pagina seleccionada.
Voy a colocar estas 3 funciones en el mismo archivo index.php, pero lo correcto sería ponerlas en un archivo de funciones (que normalmente lo nombramos functions.php) y despues, desde el index.php lo llamamos colocando el siguiente código al inicio del archivo.
En esta entrada te explico cómo conectarse a la base de datos.
require_once 'functions.php';
Pero sigamos utilizando un sólo archivo…
Las 3 funciones necesarias:
<?php
function conectar() {
$server = "localhost";
$user = "root";
$password = "";
$db = "sakila";
try {
$conn = new PDO("mysql:host=$server;dbname=$db", $user, $password, [PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"]);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $conn;
} catch (Exception $ex) {
echo $ex->getMessage();
}
}
function contarActores() {
try {
$conn = conectar();
$st = $conn->prepare("SELECT count(*) FROM actor");
$st->execute();
$actores = $st->fetchAll();
return $actores['0']['0'];
} catch (Exception $ex) {
echo $ex->getMessage();
}
}
function actoresPagina($page) {
try {
$conn = conectar();
$st = $conn->prepare("SELECT * FROM actor LIMIT " . (($page) * 18) . ", 18 ");
$st->execute();
$actores = $st->fetchAll();
return $actores;
} catch (Exception $ex) {
echo $ex->getMessage();
}
}
Como podrás ver, la funcion contarActores() simplemente nos devuelve el número total de registros que tenemos para paginar. La linea …
return $actores['0']['0'];
…la escribimos así ya que, al ser un array lo que recibimos, debemos seleccionar la posición de dicho array que nos muestra el dato que necesitamos.
En la función actoresPagina($page) , utilizamos de forma comprimida las opciones LIMIT y OFFSET de SQL.
Te explico.
- LIMIT: Limita el máximo de resultados que te devuelve en cada consulta. Para este ejemplo usamos 18 registros.
- OFFSET: Especifica a partir de qué registro quiero que me muestre los resultados. Como en cada página me ha de mostrar 18 resultados, si estoy en la página 5 me ha de mostrar esos 18 resultados partiendo del registro 90 (hasta el 108), y así sucesivamente. Fácil , verdad?. Pues sigamos…
La forma sin comprimir, y quizás más entendible sería la siguiente:
$st = $conn->prepare("SELECT * FROM actor LIMIT 18 OFFSET ". (($page) * 18));
Seguimos…
//primero obtenemos el parámetro que nos dice en qué página estamos.
$page = 1; //inicializamos la variable $page a 1 por default
if (array_key_exists('pg', $_GET)) {
//si el valor pg existe en nuestra url, significa que estamos en una pagina en especifico.
$page = $_GET['pg'];
}
//ahora que tenemos en que pagina estamos obtengamos los resultados:
// a) el numero de registros en la tabla
$conteo = contarActores();
Ya sabemos en qué página estamos en cada momento y cuántos registros tenemos en total. Sigamos.
//ahora dividimos el conteo total por el número de registros que queremos por página.
//en esto caso 18
$max_num_paginas = intval($conteo / 18);
// ahora obtenemos el segmento paginado que corresponde a esta página
$segmento = actoresPagina($page);
//ya tenemos el segmento, ahora vamos a mostrar resultados.
?>
Ahora , cerramos la llave PHP (?>) para empezar a poner el código para mostrar los resultados. Empezaremos con la fila de número que nos ayudará a seleccionar la página que queremos visualizar en cada momento.
<div style="text-align: center; font-size: 30px">
<?php
//ahora viene la parte importante, que es el paginado
//recordemos que $max_num_paginas fue previamente calculado.
for ($i = 0; $i < $max_num_paginas; $i++) {
echo '<a href="index.php?pg=' . ($i + 1) . '">' . ($i + 1) . '</a> - ';
}
?>
</div>
Este mismo código lo puedes poner al inicio y al final del archivo para poder ver los números de la navegación en las 2 posiciones.
Y ahora, vamos a mostrar los resultados:
<div class="container" style="margin-top: 3%">
<div class="row">
<?php
foreach ($segmento as $actor) {
?>
<div class="col-xs-4 col-sm-3 col-md-2 container">
<div style="border: 2px solid black; text-align: center">
<div>
<h4>ACTOR</h4>
</div>
<div class="card-desc">
<p><?= $actor['first_name'] ?></p>
<p><?= $actor['last_name'] ?></p>
</div>
</div>
<br/>
</div>
<?php
}
?>
</div>
</div>
Y con esto llegamos al final. Hay otras maneras de hacerlo, pero dudo que sea más simple que ésta.
Mira cómo queda…
Puedes copiar todos los fragmentos de código en tu archivo php y ya tendrás tu paginación finalizada.
Ahora puedes modificarlo a tus necesidades o adaptarlo a tu gusto utlizando un poco de Bootstrap o CSS. Si tines alguna duda, déjame un comentario.
Hasta pronto!!