Acortar paginación [SOLUCIONADO]

Título: Optimización de la Paginación en PHP

En el desarrollo de aplicaciones web, la paginación de resultados es un factor crucial para mejorar la experiencia del usuario y manejar grandes conjuntos de datos de manera eficiente. En PHP, una de las funcionalidades más comunes es listar información procedente, por ejemplo, de una base de datos. Sin embargo, una lista extensa puede ser abrumadora y contraproducente para la usabilidad. Es entonces cuando la paginación se convierte en una herramienta indispensable, permitiendo visualizar los datos en bloques o páginas de tamaño manejable.

**Implementando la paginación básica**

Antes de adentrarnos en la mecánica para acortar la cantidad de páginas mostradas, veamos cómo se construye un sistema de paginación básico con PHP y SQL. Suponiendo que estamos trabajando con MySQL, el primer pasaje consiste en definir cuántos elementos queremos mostrar por página y cuál es la página actual:

<?php
$elementosPorPagina = 10; // Número de elementos por página
$paginaActual = isset($_GET['pagina']) ? (int)$_GET['pagina'] : 1;
$inicio = ($paginaActual > 1) ? ($paginaActual * $elementosPorPagina - $elementosPorPagina) : 0;
?>

Conectamos a la base de datos y realizamos una consulta para determinar el número total de registros y, en consecuencia, el número de páginas:

<?php
// Conexión a la base de datos (suponiendo que se utiliza PDO)
$db = new PDO('mysql:host=localhost;dbname=nombre_base_datos;charset=utf8', 'usuario', 'contraseña');

// Obtener el número total de registros
$totalRegistrosStmt = $db->query("SELECT COUNT(*) FROM nombre_tabla");
$totalRegistros = $totalRegistrosStmt->fetchColumn();
$totalPaginas = ceil($totalRegistros / $elementosPorPagina);
?>

Con la página actual y el número total de páginas podemos generar la consulta para obtener únicamente los registros de la página deseada:

<?php
// Consulta para paginar los resultados
$datos = $db->prepare("SELECT * FROM nombre_tabina LIMIT :inicio, :elementosPorPagina");
$datos->bindParam(':inicio', $inicio, PDO::PARAM_INT);
$datos->bindParam(':elementosPorPagina', $elementosPorPagina, PDO::PARAM_INT);
$datos->execute();

// Fetch de los resultados
$resultados = $datos->fetchAll();
?>

**Visualización de la paginación en la interfaz**

La estructura HTML para visualizar la paginación podría ser algo así:

<nav aria-label="Page navigation">
  <ul class="pagination">
    <?php if ($paginaActual > 1): ?>
      <li class="page-item"><a class="page-link" href="?pagina=<?php echo $paginaActual - 1; ?>">Anterior</a></li>
    <?php endif; ?>

    <!-- Aquí irá el código para mostrar los números de página -->

    <?php if ($paginaActual < $totalPaginas): ?>
      <li class="page-item"><a class="page-link" href="?pagina=<?php echo $paginaActual + 1; ?>">Siguiente</a></li>
    <?php endif; ?>
  </ul>
</nav>

**Acortando la lista de paginación**

Ahora bien, en sitios con una gran cantidad de datos y, consecuentemente, un alto número de páginas, mostrar todas las páginas disponibles no es la mejor práctica. En su lugar, sería más conveniente acortar dinámicamente la cantidad de páginas que se muestran en el navegador.

Para ello, definimos una cantidad máxima de páginas a mostrar y después calculamos qué páginas deben ser visibles en función de la página actual. Continuamos con el ejemplo anterior y ajustamos el bloque donde se generan los números de la página:

<?php
$paginasAMostrar = 5; // Páginas visibles en torno a la página actual
$paginasAntesDespues = floor($paginasAMostrar / 2);

for ($i = max(1, $paginaActual - $paginasAntesDespues); 
     $i <= min($paginaActual + $paginasAntesDespues, $totalPaginas); 
     $i++) {
  echo "<li class='page-item".($i === $paginaActual ? " active" : "")."'>";
  echo "<a class='page-link' href='?pagina=$i'>$i</a></li>";
}
?>

Este bloque de código genera un rango de páginas centrado en la página actual permitiendo que el usuario pueda navegar de forma intuitiva sin saturar la vista con una larga lista de páginas. Es importante resaltar que el número de `$paginasAMostrar` debe ser impar para mantener un diseño simétrico.

**Posibles mejoras y aspecto dinámico**

Existen varias mejoras que pueden ser implementadas. Por ejemplo, puedes incluir enlaces directos a la primera y última página para facilitar la navegación en casos extremos:

<!-- Agregar enlace a la primera página si procede -->
<?php if ($paginaActual > ($paginasAntesDespues + 1)): ?>
  <li class="page-item"><a class="page-link" href="?pagina=1">1</a></li>
  <li class="page-item disabled"><span class="page-link">...</span></li>
<?php endif; ?>

<!-- Código del bucle para números de página -->

<!-- Agregar enlace a la última página si procede -->
<?php if ($paginaActual < ($totalPaginas - $paginasAntesDespues)): ?>
  <li class="page-item disabled"><span class="page-link">...</span></li>
  <li class="page-item"><a class="page-link" href="?pagina=<?php echo $totalPaginas; ?>"><?php echo $totalPaginas; ?></a></li>
<?php endif; ?>

La integración de **AJAX** es otra mejora valiosa. Permite la carga dinámica de la página solicitada sin recargar toda la página web, lo cual puede proporcionar una experiencia más fluida y moderna. Sin embargo, esto requeriría una discusión técnica más profunda sobre JavaScript y será tratada en otro momento para mantener la claridad de este artículo.

Por último, es prudencial añadir aspectos de **accesibilidad** como `aria-labels` y `roles` adecuados, así como considerar un diseño responsive que se adapte a cualquier tipo de dispositivo, ayudando a posicionar mejor nuestro sitio ante los motores de búsqueda y ofreciendo una mejor experiencia de usuario.

**Conclusiones**

La paginación efectiva es un aspecto importante en cualquier web que maneje grandes conjuntos de datos. Implementar un **sistema de paginación dinámico** y optimizado puede marcar una significativa diferencia tanto en rendimiento como en la facilidad de uso por parte de los usuarios.

Mientras más amigable sea la paginación, más cómoda será la experiencia al navegar por los diferentes conjuntos de información. Os animamos a implementar las técnicas aquí descritas, a personalizarlas según las necesidades de vuestro proyecto y a continuar explorando formas innovadoras de presentar los datos en vuestras aplicaciones web.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad