Paginar resultados de una consulta MySQLI utilizando PHP y jQuery

Paginar resultados de una consulta MySQLI utilizando PHP y jQuery

Siguiendo estos pasos básicos, puedes implementar una paginación efectiva para tus resultados de consulta MySQL utilizando PHP y jQuery.

Paso 1: Consulta a la base de datos y obtener los resultados paginados en PHP

Configuración inicial: Conecta a tu base de datos MySQL utilizando MySQLi o PDO en PHP.
Consulta SQL con límites: Utiliza SQL para obtener solo los resultados que necesitas en cada página. Por ejemplo:

<?php

// Establece la página actual
$page = isset($_GET['page']) ? $_GET['page'] : 1;
$records_per_page = 10; // Número de registros por página

// Calcula el inicio del conjunto de resultados
$start_from = ($page - 1) * $records_per_page;

// Consulta SQL con límite
$query = "SELECT * FROM tu_tabla LIMIT $start_from, $records_per_page";
$result = mysqli_query($conn, $query);

Asegúrate de manejar correctamente las conexiones ($conn en este caso) y de validar y sanitizar los datos para prevenir inyecciones SQL.

Paso 2: Mostrar resultados y controles de paginación en HTML
Mostrar resultados: Itera a través de los resultados obtenidos de la base de datos y muestra los datos.

while ($row = mysqli_fetch_assoc($result)) {
// Aquí puedes imprimir los datos de cada fila
echo '<div>' . htmlspecialchars($row['campo']) . '</div>';
}

?>

Controles de paginación: Genera los controles de paginación usando HTML y jQuery.

<div id="pagination">
<?php
// Calcula el número total de páginas
$query = "SELECT COUNT(*) as total_rows FROM tu_tabla";
$result = mysqli_query($conn, $query);
$row = mysqli_fetch_assoc($result);
$total_pages = ceil($row["total_rows"] / $records_per_page);

// Imprime los enlaces de paginación
for ($i = 1; $i <= $total_pages; $i++) {
echo '<span class="pagination_link" style="cursor:pointer; padding:6px; border:1px solid #ccc;" id="'.$i.'">'.$i.'</span>';
}
?>
</div>

Paso 3: Implementar la paginación con jQuery

Script jQuery: Utiliza jQuery para manejar las solicitudes de paginación y actualizar dinámicamente los resultados.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
function loadData(page){
$.ajax({
url: "pagination_data.php",
type: "POST",
cache: false,
data: {page_no:page},
success:function(response){
$("#pagination_data").html(response);
}
});
}
loadData(1);  // Carga los datos por primera vez

// Maneja el clic en los enlaces de paginación
$(document).on("click", ".pagination_link", function(){
var page = $(this).attr("id");
loadData(page);
});
});
</script>
 

 Crea un archivo PHP separado (pagination_data.php) que se encargue de generar el contenido de cada página de datos.

<?php
// Incluir la configuración de la conexión a la base de datos
include 'db_connection.php';

$page = $_POST['page_no'];
$records_per_page = 10;
$start_from = ($page - 1) * $records_per_page;

// Consulta para obtener datos de la página actual
$query = "SELECT * FROM tu_tabla LIMIT $start_from, $records_per_page";
$result = mysqli_query($conn, $query);

while ($row = mysqli_fetch_assoc($result)) {
// Imprimir los datos de cada fila
echo '<div>' . htmlspecialchars($row['campo']) . '</div>';
}
?>

Consideraciones adicionales:

Asegúrate de tener una buena gestión de errores y validación de entrada de datos en PHP y JavaScript.
Implementa medidas de seguridad como la prevención de inyecciones SQL y la validación de datos de entrada.

Personaliza el estilo y la estructura HTML según tus necesidades específicas.