Solución Rápida (Code Snippet)

Implementar una paginación sin recargar la página es sencillo si combinamos la potencia de PHP 8.3 en el backend con la versatilidad de Fetch API en el frontend.

// frontend.js - Captura el click y solicita la página de forma asíncrona
const loadPage = async (page = 1) => {
  try {
    const response = await fetch(`api/get_products.php?page=${page}`);
    const { data, pagination } = await response.json();
    
    // Función para renderizar los datos en el contenedor
    renderProducts(data);
    // Función para generar los botones de navegación
    renderPaginationButtons(pagination);
  } catch (error) {
    console.error("Error al cargar la página:", error);
  }
};
// api/get_products.php - Backend robusto con PDO
header('Content-Type: application/json');
require_once '../db.php';

$page = (int)($_GET['page'] ?? 1);
$perPage = 8;
$offset = ($page - 1) * $perPage;

// Consulta con parámetros seguros
$stmt = $pdo->prepare("SELECT * FROM productos LIMIT :limit OFFSET :offset");
$stmt->bindValue(':limit', $perPage, PDO::PARAM_INT);
$stmt->bindValue(':offset', $offset, PDO::PARAM_INT);
$stmt->execute();

$products = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo json_encode([
    'data' => $products,
    'pagination' => [
        'current_page' => $page,
        'per_page' => $perPage
    ]
]);

Cómo funciona

La paginación dinámica optimiza el rendimiento web mediante un flujo de datos asíncrono:

  1. Cálculo del Offset: En el backend, multiplicamos el número de página (menos uno) por la cantidad de elementos por página. Esto le dice a SQL desde qué fila empezar a leer.
  2. Seguridad con PDO: Usamos bindValue para asegurarnos de que los valores sean tratados estrictamente como enteros, previniendo ataques de inyección SQL.
  3. Fetch API: En el frontend, reemplazamos el tradicional enlace <a> por una función asíncrona que actualiza solo el contenedor de datos (DOM), evitando el parpadeo blanco de la recarga total.
  4. Formato JSON: La comunicación se realiza íntegramente en JSON, lo que permite que el backend sea agnóstico de la vista.

Preguntas Frecuentes

¿Por qué usar Fetch API para la paginación?

Fetch API permite realizar peticiones asíncronas al servidor sin recargar la página completa, lo que mejora significativamente la experiencia de usuario (UX) y reduce el consumo de ancho de banda.

¿Es compatible con PHP 8.3?

Sí, este código utiliza características modernas de PHP 8.3 y PDO para garantizar la máxima seguridad y rendimiento.

Enlaces relacionados