Paginación de resultados con jQuery, Ajax y PHP

La paginación de resultados se hace necesaria a medida que tenemos grandes cantidades de registros que mostrar.

En este artículo vamos a explicar una versión mejorada sobre la paginación de resultados pero esta vez vamos a utilizar las tecnologías: jQuery, Ajax, PHP y MySQLi.

Cuando tenemos muchos registros y no queremos mostrar una lista de registro muy larga podemos usar paginación para mostrar los resultados de la consulta en distintas páginas.

Cuando se presentan en una página web registros crecientes de una tabla de una base de datos en formato listado, en la mayoría de los casos acaban siendo demasiados registros como para colocarlos todos en una misma página. En estas ocasiones se suele paginar los resultados, quizás cientos, en distintas páginas con conjuntos de registros mucho menos numerosos.

Por ejemplo, podemos presentar los resultados en páginas de 10 elementos o 20, dependiendo de nuestras intenciones y el tipo de datos que se estén presentando. Este efecto lo has podido observar repetidas veces en los buscadores.

En este artículo vamos a ilustrar un ejemplo en el que vamos a tener más de 100 productos de nuestra tienda que estamos leyendo de la base de datos y hemos decidido mostrarlos de 6 en 6.

La paginación se puede hacer solo con PHP pero, en este caso, cada vez que se pulsa en un número de página se recarga la página. Quizá no te interesa eso por cuestiones de usabilidad y de hacer esperar al usuario para ver más resultados. En esta entrada vamos a ver como aplicarle jQuery y Ajax para paginar resultados sin recargar la página de nuevo.

Esta entrada ha sido actualizada el 16/07/2018 aportando toda la experiencia, profesionalidad y compromiso que hemos adquirido en el transcurso del tiempo.

En el archivo principal o index.php, dentro del <head> debes agregar los scripts y estilos necesarios para hacer funcionar la paginación:

<link rel="stylesheet" href="css/styles.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

Tan solo agregamos estilos propios del ejemplo y la librería jQuery. En el ejemplo en funcionamiento, para el aspecto visual también nos apoyamos en la tecnología Bootstrap para no tener que aplicar muchos estilos propios. De esta forma nos ahorramos mucho trabajo.

En el archivo principal o index.php es importante agregar el siguiente código:

<?php 
require('config.php');
$result = $connexion->query('SELECT COUNT(*) as total_products FROM product WHERE active = 1');
$row = $result->fetch_assoc();
$num_total_rows = $row['total_products'];
?>

Requerimos del archivo «config.php» que tan solo conecta con la base de datos utilizando la tecnología MySQLi y dispone del número de elementos que queremos para cada página. Este archivo contiene:

<?php
define('DB_SERVER', 'localhost');
define('DB_SERVER_USERNAME', 'YOUR USERNAME');
define('DB_SERVER_PASSWORD', 'YOUR PASSWORD');
define('DB_DATABASE', 'YOUR DATABASE');
define('NUM_ITEMS_BY_PAGE', 6);
 
$connexion = new mysqli(DB_SERVER, DB_SERVER_USERNAME, DB_SERVER_PASSWORD, DB_DATABASE);
?>

Después tan solo hacemos una consulta a la base de datos para saber el número de productos que hay activos que será un parámetro importante para el número de páginas.

Dentro del <body> debes agregar el código que recorre los primeros registros y los muestra en pantalla, además de los números de paginación:

<?php
//Si hay registros
if ($num_total_rows > 0) {
    $num_pages = ceil($num_total_rows / NUM_ITEMS_BY_PAGE);
    $result = $connexion->query(
        'SELECT * FROM product p 
        LEFT JOIN product_lang pl ON (pl.id_product = p.id_product AND pl.id_lang = 1) 
        LEFT JOIN image i ON (i.id_product = p.id_product AND cover = 1) 
        WHERE active = 1 
        ORDER BY date_upd DESC 
        LIMIT 0, '.NUM_ITEMS_BY_PAGE
    );
    if ($result->num_rows > 0) {
        echo '<ul class="row items">';
        while ($row = $result->fetch_assoc()) {
            echo '<li class="col-lg-4">';
            echo '<div class="item">';
            echo '<h3>'.$row['name'].'</h3>';
            ...
            echo '</div>';
            echo '</li>';
 
        }
        echo '</ul>';
    }
 
    if ($num_pages > 1) {
        echo '<div class="row">';
        echo '<div class="col-lg-12">';
        echo '<nav aria-label="Page navigation example">';
        echo '<ul class="pagination justify-content-end">';
 
        for ($i=1;$i<=$num_pages;$i++) {
            $class_active = '';
            if ($i == 1) {
                $class_active = 'active';
            }
            echo '<li class="page-item '.$class_active.'"><a class="page-link" href="#" data="'.$i.'">'.$i.'</a></li>';
        }
 
        echo '</ul>';
        echo '</nav>';
        echo '</div>';
        echo '</div>';
    }
}
?>

Finalmente dentro del <head> o justo debajo de la etiqueta de cierre </body> puedes agregar el controlador del evento:

<script type="text/javascript">
$(document).ready(function() {	
    $('.pagination li a').on('click', function(){
        $('.items').html('<div class="loading"><img src="images/loading.gif" width="70px" height="70px"/><br/>Un momento por favor...</div>');
 
        var page = $(this).attr('data');		
        var dataString = 'page='+page;
 
        $.ajax({
            type: "GET",
            url: "ajax.php",
            data: dataString,
            success: function(data) {
                $('.items').fadeIn(2000).html(data);
                $('.pagination li').removeClass('active');
                $('.pagination li a[data="'+page+'"]').parent().addClass('active');
            }
        });
        return false;
    });              
});    
</script>

El código anterior lo que hace es esperar a que algún número del bloque de paginación sea clikeado para ejecutar el proceso de paginación.

Por cada enlace de la paginación que se haga click, rellenamos el contenedor de elementos con una imagen que aplica el efecto de cargando… (esto se puede quitar para acelerar el proceso de la paginación), recogemos el parámetro que nos indica el número de página que el usuario quiere ver y, luego, mediante la técnica Ajax hacemos una llamada asíncrona al archivo «ajax.php» pasándole el número de página usando el método GET.

Mediante el success del ajax depositamos la información que nos envía el archivo «ajax.php» en el contenedor deseado y activamos el número de página en el que se ha hecho click.

El archivo «ajax.php» se encarga de retornar los productos que hay en la página escogida. Puedes ver el código a continuación:

<?php
require_once('config.php');
 
$html = '';
$page = $_GET['page'];
$rowsPerPage = NUM_ITEMS_BY_PAGE;
$offset = ($page - 1) * $rowsPerPage;
sleep(1);
 
$result = $connexion->query(
    'SELECT * FROM product p 
    LEFT JOIN product_lang pl ON (pl.id_product = p.id_product AND pl.id_lang = 1) 
    LEFT JOIN `image` i ON (i.id_product = p.id_product AND cover = 1) 
    WHERE active = 1 
    ORDER BY date_upd DESC LIMIT '.$offset.', '.$rowsPerPage
);
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $html .= '<li class="col-lg-4">';
        $html .= '<div class="item">';
        $html .= '<h3>'.$row['name'].'</h3>';
        ...
        $html .= '</div>';
        $html .= '</li>';
    }
}
 
echo $html;
?>

Qué hace este código?

  • Conectamos con la base de datos.
  • Recepcionamos la página que ha elegido el usuario.
  • Calculamos el número por el cual se debe empezar a retornar registros.
  • La función sleep() la usamos para retrasar el proceso y ver el efecto de cargando. Se puede quitar si no interesa.
  • Hacemos la consulta paginada usando LIMIT en la consulta.
  • Recorremos y rellenamos nuestra variable $html con la información de los registros paginados.
  • Lo retornamos con echo a la llamada Ajax.

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (43 votos, promedio: 4,67 de 5)
Cargando…
Comparte en las redes sociales

134 respuestas a “Paginación de resultados con jQuery, Ajax y PHP”

  1. isaias dice:

    tengo un problema al mostrar los registro «me pueden apollar como es la estructura de la base de datos que campos»

    • Jose Aguilar dice:

      Hola,

      Gracias por tu mensaje.

      La estructura de la base de datos la puedes localizar en una instalación limpia de PrestaShop. En este caso, lo ideal es que adaptes este código a tu base de datos cambiando las consultas pero manteniendo los límites de la paginación.

      Saludos

  2. Daniel dice:

    esta padre la paginacion peo como se podria hacer esto

    1 2 3 4 5 6 … > 500
    1 … > 495, 496, 497, 498, 499, 500

  3. isaias dice:

    Fatal error: Call to a member function fetch_assoc() on boolean in C:\xampp\htdocs\paginacion\index.php on line 4

  4. isaias dice:

    me marca ese error ayuda x favor
    Fatal error: Call to a member function fetch_assoc() on boolean in C:\xampp\htdocs\paginacion\index.php on line 4

  5. Larry dice:

    Exelente tutorial amigo, me salvaste de una que necesité para un proyecto. Muchas gracias. Dígame dónde puedo hacerle humildemente un reconocimiento a su labor. Soy Larry franco de colombia (sigelip@gmail.com) watsapp 57 3136619782

  6. Erick dice:

    parece que el error es cuando inicia es que le asignas :
    $pageNum = 1;
    y en el if de la paginación le dices:
    if ($pageNum != 1)

  7. Erick dice:

    cargue tu ejemplo y cuando esta en la primera paginación, no muestra la navegación.

  8. Esmeralda dice:

    saludos, logre implementar este proyecto a mi pagina en local, pero solo tengo un pequeño problema, al inicio del archivo pagination.php, yo requiero de una variable que es enviada mediante url, la cual la capturo por medio de un GET asi:

    $segmento = $_GET[‘segmento’];
    $query_num_services = mysql_query(“select SegmentoNombre from segmento, tematicas where segmento=’”.$segmento.”‘ and tematicas.segmento=segmento”, @$conexion);

    ahora le digo a la pagina que me muestre 5 registros por pagina, la consulta tiene 6 registros, me muestra los 5 primeros pero al darle a siguiente no me muestra nada, PERO si a la consulta le agrego el valor manualmente me funciona a la perfeccion, que podría ser?

  9. rafa dice:

    Hola!! me encanta tu página, gracias por todo lo que nos enseñas. Tengo un problema y es que necesito paginar comentarios y respuestas con msqly y pdo …he intentado aplicar todos los ejemplos que tienes pero no me funciona ninguno..¿Me puedes ayudar?
    Gracias y saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.