Paginación de consultas con PHP, MySQL y AJAX

Si desemos paginar los resultados de una consulta, podemos hacerlo con PHP y quedaría excelente, pero sin embargo, si queremos que al momento de pasar de una página a otra no recarge toda la página sino solo el contenido que nos interesa. Para ello podemos hacer uso de AJAX.

Por ejemplo, nuestra tabla de artículos tiene más de 200 registros, cargar esos 200 artículos en una página web tomaría su tiempo. Así que es mejor si los mostramos por páginas o bloques de 10 registros (por ejemplo) , y colocamos el número de páginas en forma de enlaces para navegar por los todas las páginas. En el caso del ejemplo, sería algo de 20 páginas (200/10).

Para realizar todo lo mencionado vamos a hacer uso del lenguaje PHP, MySQL como gestor de Base de Datos y AJAX.

Deberemos crear y configurar un archivo para conectar con la base de datos que llamaremos «conexion.php» y contendrá lo siguiente:

<?php
//Configuracion de la conexion a base de datos
$bd_host = "servidor";
$bd_usuario = "usuario";
$bd_password = "contraseña";
$bd_base = "mibasededatos";
$con = mysql_connect($bd_host, $bd_usuario, $bd_password);
mysql_select_db($bd_base, $con);
?>

Ahora en un archivo JavaScript, el cual llamaremos ajax.js hacemos uso del objeto XMLHttpRequest para hacer peticiones al servidor sin necesidad de recargar toda una página web. También, crearemos la función llamada Pagina(nroPagina), esta recibirá un valor correspondiente a un número de página y se enlazará con el archivo paginador.php para procesar ese número de página. Y el resultado se mostrará en la capa (<div id=»contenido»>.

function objetoAjax(){
 var xmlhttp=false;
  try{
   xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
   try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }catch(E){
    xmlhttp = false;
   }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
   xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}

function Pagina(nropagina){
 //donde se mostrará los registros
 divContenido = document.getElementById('contenido');

 ajax=objetoAjax();
 //uso del medoto GET
 //indicamos el archivo que realizará el proceso de paginar
 //junto con un valor que representa el nro de pagina
 ajax.open("GET", "paginador.php?pag="+nropagina);
 divContenido.innerHTML= '<img src="anim.gif">';
 ajax.onreadystatechange=function() {
  if (ajax.readyState==4) {
   //mostrar resultados en esta capa
   divContenido.innerHTML = ajax.responseText
  }
 }
 //como hacemos uso del metodo GET
 //colocamos null ya que enviamos
 //el valor por la url ?pag=nropagina
 ajax.send(null)
}

El archivo principal de este proceso es paginador.php, este archivo es el encargado de mostrar los registros dependiendo de la página elegida y tendrá la siguiente estructura:

<?php
require('conexion.php');
$RegistrosAMostrar=4;

//estos valores los recibo por GET
if(isset($_GET['pag'])){
    $RegistrosAEmpezar=($_GET['pag']-1)*$RegistrosAMostrar;
    $PagAct=$_GET['pag'];
    //caso contrario los iniciamos
}else{
    $RegistrosAEmpezar=0;
    $PagAct=1;
}

$query = "SELECT post_date, post_title, post_name, DATE_FORMAT(post_date, '%d-%m-%Y') as fecha
                FROM table
                ORDER BY post_date desc
                LIMIT $RegistrosAEmpezar, $RegistrosAMostrar";

$Resultado=mysql_query($query, $con);
echo "<table border='1px'>";
while($MostrarFila=mysql_fetch_array($Resultado)){
    echo "<tr>";
    echo "<td>".$MostrarFila['post_name']."</td>";
    /*if ($PagAct == 1)
        echo "<td>".$MostrarFila['post_title']."</td>";
    else*/
        echo "<td>".utf8_encode($MostrarFila['post_title'])."</td>";
    echo "<td>".$MostrarFila['fecha']."</td>";
    echo "</tr>";
}
echo "</table>";

$NroRegistros=mysql_num_rows(mysql_query("SELECT * FROM table",$con));
$PagAnt=$PagAct-1;
$PagSig=$PagAct+1;
$PagUlt=$NroRegistros/$RegistrosAMostrar;

//verificamos residuo para ver si llevará decimales
$Res=$NroRegistros%$RegistrosAMostrar;
// si hay residuo usamos funcion floor para que me
// devuelva la parte entera, SIN REDONDEAR, y le sumamos
// una unidad para obtener la ultima pagina
if($Res>0) $PagUlt=floor($PagUlt)+1;

//desplazamiento
echo "<a onclick=\"Pagina('1')\">Primero</a> ";
if($PagAct>1) echo "<a onclick=\"Pagina('$PagAnt')\">Anterior</a> ";
echo "<strong>Pagina ".$PagAct."/".$PagUlt."</strong>";
if($PagAct<$PagUlt)  echo " <a onclick=\"Pagina('$PagSig')\">Siguiente</a> ";
echo "<a onclick=\"Pagina('$PagUlt')\">Ultimo</a>";
?>

El archivo index.php tendrá un tabla HTML con tres columnas (Nombre, Titulo, Fecha) y un capa (<div>) llamado «contenido» dentro de la cual haremos un include del archivo paginador.php.

<html>
<head>
<title>Paginar Resultados</title>
<script type="text/javascript" src="ajax.js"></script>
<style>
td{
 width:200px;
}
a{
 text-decoration:underline;
 cursor:pointer;
}
</style>
</head>
<body>
<div style="margin:auto;width:500px;text-align:center;">
 <table border="1px">
  <tr>
   <td>Nombres</td>
   <td>Departamento</td>
   <td>Sueldo</td>
  </tr>
 </table>
 <div id="contenido">
  <?php include('paginador.php')?>
 </div>
</div>
</body>
</html>

Ver ejemplo en funcionamiento

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!
(13 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

18 respuestas a “Paginación de consultas con PHP, MySQL y AJAX”

  1. Hola buenas noches,
    Muchas gracias por compartir este excelente post. Funciona de maravilla; sólo tengo una duda, con este tipo de paginador los buscadores nos indexarian todos los contenidos o de alguna manera podríamos tener algún inconveniente con el SEO?

    • Jose Aguilar dice:

      Hola,

      Quizás en los enlaces que van al resto de página convendría poner un index no follow o algo similar para que los buscadores no rastren todas las páginas y evitar así el contenido duplicado.

      Saludos

  2. Alvaro dice:

    Funciona perfecto, el único problema es que si quiero poner otra páginación en la misma página con otro div no me deja porque se entremezclan los parámetros. ¿cómo puedo hacer para que no me pase eso? gracias.

    • Jose Aguilar dice:

      Tendrás qua cambiar los parámetros. NO hay otra.

      • Alvaro dice:

        Hola Jose! bueno, decirte que ya solucione lo de varios paginadores en una misma página. Solo tenía que cambiar la función Pagina por cualquier otra palabra y luego cambiarlo también en los enlaces y solucionado. Ahora me he dado cuenta probando el paginador en varios navegadores de que cuando le doy a siguiente y anterior no me lee las tildes, en Chrome, Opera y Safari se solucionó colocando una meta ISO-8859-1 en la primera linea del paginador, pero esto no funciona en Firefox ni en Explorer, por favor ¿me podrías decir como solucionar este problema? llevo ya tiempo con esto y no hay manera.

  3. Renato dice:

    No puedo onectar con mi base de datos llamada tienda_miguel, en conexion.php lo tengo así:

    Pero no sé en q archivos mas tengo q cambiar los nombres de mi tabla llamada factura, no me muestran mis registros

  4. Miguel dice:

    Hola

    Excelente, tenia que realizar una paginacion para mi web, de un modo sencilla y practica, y me ha venido fenomenal. Añadire un poco de css para dejarla mas vistosa y funcional.

    saludos

  5. Alexis Herrera dice:

    Hola, estoy haciendo el ejemplo de paginación pero me funciona con un error y es que me duplica los títulos del index.php como tal, no sé que tengo malo ¿es posible que me puedas ayudar?

    • Jose Aguilar dice:

      Hola, si nos pasas una url para ver el problema seguro que alguien te puede ayudar.

      • Alexis Herrera dice:

        Hola, Muchas Gracias por estar atento a los comentario y ayudar a los usuarios, tarde varias horas tratando encontrar el problema y lo solucioné, en el archivo ajax estaba llamando al index.php y por eso se me duplicaba el contenido a penas llamé al archivo registrados.php ¡Eureka!.
        Estos son esos errores que hacen decir «hp como no caí en cuenta de eso antes, esa guevo$#% todo el tiempo que me hizo perder….» pero creo que hace parte de oficio que querer ser programador.
        PDT. No compartí un link porque lo estoy implementando localmente, nuevamente ¡muchas Gracias! por el Tutorial y por la atención.

  6. Erick Zelaya dice:

    Excelente funciona muy bien cuando son varios registros de una tabla. Como puedo hacer cuando tengo una tabla de contenido con mucho texto y necesito paginarlo es decir, contar el numero de caracteres y en base a eso hacer la paginacion… Necesito su ayuda!!!

  7. carlos dice:

    Hola. Gracias por el ejemplo, funciona correctamente, aunque he intentado pasar parámetros con la paginación como resultado de la búsqueda.
    He probado en la línea:
    <code>echo \"<a onclick=\\\"Pagina(\’$PagUlt\’)\\\">Ultimo</a>\";</code>

    ¿Cómo lo harías tú? Gracias de antemano

  8. Rikochett dice:

    Estimado José,

    Si no es mucho pedir, ¿podrías adjuntar en un comprimido el ejemplo, a finde uno adaptarlo a las propias necesidades?

    Gracias y felicitaciones por tu magnífico blog, con tanta información útil.

  9. Alix dice:

    Muchas gracias sencillo, práctico y funcionable. Gracias!!!

  10. invest liberty reserve dice:

    Jose Aguilar » Paginación de consultas con PHP, MySQL y AJAX I was recommended this web site by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my difficulty. You’re amazing! Thanks! your article about Jose Aguilar » Paginación de consultas con PHP, MySQL y AJAX Best Regards Cindy Craig

  11. Emanuel Bitsko dice:

    I like this website very much, Its a really nice berth to read and obtain information. «I am a great believer in luck. The harder I work the more of it I seem to have.» by Coleman Cox.

  12. good idea im gonna try it

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

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

Ver más sobre