Paginación de resultados con jQuery, PHP y JSON

Este tutorial muestra el procedimiento para realizar la paginación de resultados con un estilo “Ver más” o “more”, donde sólo se mostrarán los últimos artículos, y las noticias más antiguas se accederán solamente vía el botón de "ver más", cargándose mediante Jquery en la misma página.

Voy a usar HTML5 y CSS3 para la estructura del sitio en HTML, y un poco de CSS3 para darle los estilos, Javascript para conectar al servidor usando AJAX y manipular el DOM (estructura) del sitio (en realidad casi todo el código está basado en las funciones de la librería JQuery), y por último PHP y MySQL para buscar los “artículos” en la base de datos y devolverlos en formato JSON.

Elegí JSON ya que es natural para manejarlo con Javascript, y así quitamos la carga del servidor de tener que generar el HTML directamente y enviarlo.

Lo primero será presentarles el ejemplo funcionando.

Ahora los primeros códigos, la estructura html:

Código :

<!DOCTYPE html>
<html lang="es">
   <head>
      <meta charset="UTF-8" />
      <!-- Estilos del sitio. -->
      <link rel="stylesheet" type="text/css" href="style.css">
      <!-- Librerias .js de utilidad. Modernizr para activar (html5shiv) 
         las nuevas etiquetas de html5 en internet exploerer <= 8 -->
      <script src="modernizr.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   </head>
   <body>
      <!-- "wp" es simplemente un div para centrar el contenido -->
      <div id="wp">
         <h1>Listado de los &uacute;ltimos art&iacute;culos del sitio</h1>


         <!-- "articulos-wp" es el contenedor de los "articulos" que se iran agregando. 
            Vacio al principio -->
         <section id="articulos-wp">
         </section>

         <!-- Link que se presiona para buscar mas resultados, y el gif de efecto "cargando" -->
         <a href="#" id="ver_mas">Ver mas!</a>
         <img src="loading.gif" id="loading-gif"/>
      </div>
   <!-- El codigo principal que nos permitira buscar mas articulos y mostrarlos -->
   <script src="ver_mas_scripts.js"></script>
   
   </body>
</html>

Por ahora no requiere mayor explicación. El CSS no hace falta comentarlo ya que no depende de floats, position u otro atributo que pueda afectar la funcionalidad de nuestro script.

¿Cómo funciona?

La página hace una petición al servidor. Ya sea por un clic en “ver más” o porque está recién cargada y busca los artículos más recientes. El mismo script calcula a partir de qué artículo buscar contando los que ya se visualizan en la página.
El servidor busca en la base de datos. Y devuelve los artículos en formato JSON, además de ciertos valores que pueden son útiles como el total de estos, y los restantes que no se han mostrado aún.
A través de JQuery creamos las etiquetas con los datos que recibimos del server y los insertamos en la página.

La página hace una petición al servidor

La función que tiene este trabajo es:

Código :

function masArticulos(){
   /* Guardo en una variable (un objeto jquery), una referencia a la imagen de "cargando" y el botón para buscar mas artículos*/
   var $loadingGif = $('#loading-gif');
   var $verMas     = $('#ver_mas');

   /* Determino el comienzo, a partir de que articulo debo buscar en el servidor. Lo hago seleccionando los <article> con clase "articulo". La propiedad length  es un numero y es lo que almacena la variable.*/
   var comienzo = $('#articulos-wp .articulo').length;


   // Asigno un comportamiento al .gif de loading cuando se disparen los eventos,
   // ajaxStart y ajaxStop (empieza y termina la conexion)

   $loadingGif.on('ajaxStart', function(){
      /*this hace referencia al objeto al que le asignamos el evento. Si lo encerramos en $() lo "transformamos" en un objeto Jquery  y podemos usar sus métodos sobre este. */
      $(this).show();
      $verMas.hide();
   });
   
   //Cuando termina oculto la imagen.
   $loadingGif.on('ajaxStop', function(){
      $(this).hide();
   });

   //$.ajax() es el método que nos proporciona jquery
   $.ajax({
            url: 'mas_resultados.php',
            type: 'get',
            data: 'comienzo=' + comienzo,
            dataType: "json",
            success: function(data){
               agregar_articulos(data.articulos);
               
                if( data.cantidad_restante > 0){
                   $('#ver_mas').show();
                }
            },
            error: function(){
                console.log('Fallo conectando con el servidor')
            }
        });
}

Configuración del método $.ajax():

Url: Dirección a la que conectamos.
Type: puede ser GET/POST
data: Datos enviados al servidor, en formato de url ?clave = valor
dataType: tipo de dato devuelto por el servidor (html, json, etc)
success: Calback (o función anónima) que se ejecuta cuando termina el llamado sin errores.
Error: Calback que se ejecuta cuando termina el llamado con errores, porque la url no es válida, o el JSON no está bien formateado por ejemplo.

El callback del atributo success recibe un parámetro (data) y es el que contiene la información que nos envía el servidor. En nuestro caso primero se lo pasamos directamente a la función agregar_articulos() y por último accedemos a uno de sus valores llamado “cantidad_restante” que nos dice si existen artículos que no se mostraron. De ser así, volvemos a mostrar el botón “Ver Más”.

El servidor busca en la base de datos

Código del archivo mas_resultados.php:

Código :

<?php
//Versiones anteriores de php 5.2, o instalaciones sin la funcion json_encode()
require_once('json_encode.php');

//La variable comienzo que enviamos con el parámetro data de $.ajax()
$comienzo = $_GET['comienzo'];

//Mostramos uno mas en caso de que sea la primer peticion.
if( $comienzo == 0 ){
   $limite = 3;   
} else {
   $limite = 2;
}

//Conexion a la base de datos
$db = new mysqli('localhost', 'root', '', 'paginacion_ver_mas');

//Consulta para saber el total de articulos
$rs_query = $db->query('SELECT COUNT(`titulo`) AS cantidad FROM `articulos`');

$cantidad_total = $rs_query->fetch_assoc();
/*
* Creo el array que se transformara en formato JSON
* Le asigno el valor cantdidad_total, los otros 2 se inicializan vacios
*/
$data = array(
      'cantidad_total' => (int) $cantidad_total['cantidad'],
      'cantidad_restante' => NULL,
      'articulos' => array()
   );

//Esta consulta busca los articulos con 2 parametros:
//Comienzo, a partir de cual buscar, y la cantidad limite.
$format = 'SELECT * FROM `articulos` ORDER BY `fecha_agregado` DESC LIMIT %d, %d';

//sprintf cambia los comodines (%d) por los valores que le pasemos como parametros.
$sql = sprintf($format, $comienzo, $limite);

$rs_query = $db->query($sql);

//Recorro los resultados y los voy agregando a $data.
while( $articulo = $rs_query->fetch_assoc() ){
   //$articulo es un array asociativo dentro del while.
   $data['articulos'][] = $articulo;
}

//Calculo la cantidad de artículos aun sin mostrar
//$rs_query tiene el resultado de la última consulta.
$data['cantidad_restante'] = ($cantidad_total['cantidad'] - $rs_query->num_rows ) - $comienzo;

//Para que se vea el efecto "loading" si lo trabajan en local
sleep(1);

//Imprimo el resultado en formato de cadena JSON
print json_encode($data);

La función json_encode() requiere que la información que reciba como parámetro esté codificada como utf-8. Así que es recomendable configurar la base de datos para trabajar con esta codificación.

A través de JQuery creamos las etiquetas

Código :

function agregar_articulos(lista_articulos)
{
   //Contenedor de los articulos
   var $contendor_principal = $('#articulos-wp');
   
   //Descomentar para ver el formato en que llegan los datos
   //console.log(lista_articulos)

   //Recorro el objeto JSON
   for( var i = 0; i < lista_articulos.length; i++ ){
      //Creo los tags que contendran la info de cada articulo
      var $articulo          = $('<article> </article>');
      var $articuloHeader    = $('<header> </header>');
      var $articuloTitulo    = $('<h1>');
      var $articuloFecha     = $('<span>');
      var $articuloContenido = $('<div>');

      //addClass es un metodo jQuery, agrega una clase CSS al elemento
      $articulo.addClass('articulo');

      //Agrego el texto del título y la fecha.
      $articuloTitulo.text( lista_articulos[i].titulo );
      $articuloFecha.text( lista_articulos[i].fecha_agregado );


      $articuloContenido.addClass('contenido');
      $articuloContenido.text(lista_articulos[i].contenido);
      
      /* Utilizo el metodo .append() para insertar los elementos o tags dentro de sus padres.*/

      $articuloHeader.append($articuloTitulo);
      $articuloHeader.append($articuloFecha);

      $articulo.append($articuloHeader);
      $articulo.append($articuloContenido);

      ///Por ultimo agrego el articulo completo al contenedor de estos.
      $contendor_principal.append($articulo);
   }
}

En esta función recibe como parámetro una variable que contiene los artículos que nos envió el servidor. Itera sobre estos a través de un bucle for().

Lo primero es crear los tag que darán formato a mis artículos. Hacer $(‘tag’), es similar a document.createElement(‘tag’) y ya nos queda una referencia a ese elemento en nuestra variable pero con los métodos de JQuery.

Para las etiquetas de HTML5 utilizo una sintaxis un poco distinta, ya que sino da errores en IE8.

Luego vamos armando todo, agregando los datos de cada artículo accediendo a éstos y eligiendo el atributo que queremos leer según haga falta.

Los atributos llevan el nombre de la tabla MySql, pero puede cambiarse creando un array temporal en el archivo PHP y poniéndole el nombre que queramos a las claves.

Una vez terminado se van agregando las distintas etiquetas en su lugar. A mí me parece cómoda y fácil de entender esta forma de hacerlo pero no aseguro que sea la mejor, es solo una forma.

Al final, los eventos

En JQuery se asignan manejadores de eventos a través de esta sintaxis:

Código :

$(elemento).on(‘evento’, callback(event){
    //Lo que quieras que suceda
})

Código :

$(document).on('ready', function(){
   masArticulos();
});
$('#ver_mas').on('click', function(e){
   e.preventDefault();
   masArticulos();
});

De esta manera agregamos el código para que la función masArticulos() se ejecute al cargar la página y en cada click al botón “ver más”.

Bueno, este fue mi primer aporte así que posiblemente tenga errores, de todos modos espero que se entienda y aún mejor les sea útil para sus sitios.

Archivos para descargar.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Paginación de resultados con jQuery, PHP y JSON

¿Cómo funciona?

La página hace una petición al servidor

Configuración del método $.ajax():

El servidor busca en la base de datos

A través de JQuery creamos las etiquetas

Al final, los eventos

Publica tu comentario

o puedes...