Paginar consultas con MySQL, PHP y Ajax

Si desemos paginar los resultados de una consulta, podemos hacerlo con PHP y quedaría excelente, por ejemplo en la Portada de este Blog, en la parte final, se puede apreciar un ejemplo en acción. 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 Empleados tiene como 150 registros, pero cargar esos 150 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 15 páginas (150/10). Vamos a materializar nuestro aplicación, haciendo uso del lenguaje PHP, MySQL como gestor de Base de Datos y Ajax. Explicaré el objetivo que tiene cada archivo, aunque también incluyo comentarios en los script como para que se entienda mejor. Cualquier duda o pregunta, pueden hacerla con toda confianza.

[Ver el resultado final]

Vamos a trabajar con la tabla Empleados, la cual hemos venido usando en anteriores ejemplos. [Ver Tabla]. Los datos de la conexión a la Base de Datos se guardarán en el archivo conexion.php.

<?php
//Configuracion de la conexion a base de datos
$bd_host = "miservidor"; 
$bd_usuario = "miusuario"; 
$bd_password = "micontraseñ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 (está función hemos venido usandola en anteriores tutoriales). 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>) "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. Describiré los procesos de manera que sea entendible, de todas maneras pueden preguntar por medio del formulario de comentarios:

  • Antes que nada, hacer un require del archivo de conexión a la Base de Datos (conexion.php).
  • Específicamos qué cantidad de registros se mostrarán por página ($RegistrosAMostrar). Pueden cambiar este valor por el que deseen, y el número de páginas se adecuará a ello. Pero para nuestro ejemplo mostraremos 4 registros por página.
  • En el if verificamos la variable $_GET['pag'], si está definida hacemos uso de dos variables: $RegistroAEmpezar que será la variable $_GET['pag'] menos 1 multiplicado por la cantidad de registros a mostrar (Ejm. Elegimos Pagina 5, 5 menos 1 igual 4, 4 multiplicado por 3 igual 12, a partir del registro 12 se empezaría a mostrar la consulta en la página 5), y $PagAct tendrá el valor de la variable $_GET['pag']. En el caso de que las variables no estén definidas las variables $RegistroAEmpezar y $PagAct tendrán el valor de 0 y 1 respectivamente.
  • Luego realizamos una consulta SELECT y usamos LIMIT con valores de las variables $RegistroAEmpezar y $RegistrosAMostrar y en una tabla HTML mostramos los resultados.
  • Realizamos un proceso para determinar el número de páginas dependiendo de la cantidad registros de la tabla ($NroRegistros) y de los registros a mostrar ($RegistrosAMostrar). El proceso lo he comentado en el script para que se entienda mejor.
  • Finalmente especificamos enlaces de navegación (Primero, Anterior, Siguiente, Último), cada uno de estos enlaces hará una llamada a la función JavaScript Pagina(nropagina).
<?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;
 }

 $Resultado=mysql_query("SELECT * FROM empleado ORDER BY nombres LIMIT $RegistrosAEmpezar, $RegistrosAMostrar",$con);
 echo "<table border='1px'>";
 while($MostrarFila=mysql_fetch_array($Resultado)){
  echo "<tr>";
  echo "<td>".$MostrarFila['nombres']."</td>";
  echo "<td>".$MostrarFila['departamento']."</td>";
  echo "<td>".$MostrarFila['sueldo']."</td>";
  echo "</tr>";
 }
 echo "</table>";

 //******--------determinar las páginas---------******//
 $NroRegistros=mysql_num_rows(mysql_query("SELECT * FROM empleado",$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 (Nombres, Departamento, Sueldo) 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>

Esta es una manera organizada de mostrar nuestras consultas de una Base de Datos. Cualquier duda, consulta, crítica constructiva abajo en sus comentarios. [Ver el resultado final]

Compartir/Guardar artículo

Comentarios

  1. avatar galax 2008-11-11 11:15:25 64 ami me gustaria una paginacion asi de este tipo como se ilustra aqui en cada comentarios como pueden ver esta la paginacion con css y con numeros seria exelente que explicaran este tipo de paginacion como se ilustra en este ejemplo... sii el web master escucha mi llamado seria gernial..
  2. avatar galax 2008-11-07 12:17:13 63 ola kisiera tener un paginador con style como este post si alguien sabe de donde sacarlo se lo agredeceria , asi con ese paginador y estilo de los comentarios y de este formulario..
  3. avatar Juan 2008-10-23 10:49:41 62 pana a mi no me corre no me muestra el link por q la funcion no esta definida o hecha ps asi es el error q muestra

    Fatal error: Call to undefined function pagina() in ...\paginador.php on line 40
  4. avatar johnnie 2008-10-18 14:03:22 61 El codigo funciona estupendamente, yo quiero que me aparezca asi:

    primero 1,2,3,4,5.....10,11,12) ultimo

    como puedo conseguirlo ?
  5. avatar Ricardo C 2008-08-17 16:49:33 60 a mi tampoco me daba Rumberon1 :S pero le quite unas cosas y da bien :P, proba cambiando las ultimas lineas por esto

    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>";
  6. avatar JoelCristobal 2008-06-28 13:25:49 59 Saludos
    ------------------------------
    www.onlysystem.com
    www.joelcristobal.com
    www.disenowebperu.info
  7. avatar JoelCristobal 2008-06-28 13:24:30 58 Gracia, que buen aporte

    ----------------------
    <a href="http://www.disenowebperu.info">Diseño Web</a>
    <a href="http://www.onlysystem.com">Diseño Web Peru</a>
    <a href="http://www.joelcristobal.com">desarrollo de software</a>
  8. avatar Primitivo R. Montero 2008-06-11 08:43:48 57 Solucionado el problema de la ñ y los acentos.
    Antes que nada dejenme comentarles que este blog esta muy bueno y es de gran utilidad al momento de mostrar las consultas.
    Lo unico que hay que hacer es modificar el codigo de paginador.php, lo que vamos hacer es que para la primera vez que consultemos este codificado de acuerdo a nuestro header de la pagina index.php, fijemonos en el codigo de paginador.php, en la parte donde verificamos si se ha enviado una variable por GET.

    if(isset($_GET['pag'])){
    //aca vamos a conviar la codificacion a UTF-8
    }
    else{

    }

    Por pura logica, la primera consulta que hacemos no enviamos nada por GET, entonces no cambiamos la codificación, para el caso que enviemos por GET (cuando presionamos, siguiente, anterior, primero o ultimo) vamos a cambiar la codificación.

    Por lo tanto el codigo de paginador quedaria de la siguiente manera:

    <?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
    $Resultado=mysql_query("SELECT * FROM empleado ORDER BY nombres LIMIT $RegistrosAEmpezar, $RegistrosAMostrar",$con);
    echo "<table border='1px'>";
    while($MostrarFila=mysql_fetch_array($Resultado)){
    echo "<tr>";
    echo "<td>".utf8_encode($MostrarFila['nombres'])."</td>";
    echo "<td>".utf8_encode($MostrarFila['departamento'])."</td>";
    echo "<td>".utf8_encode($MostrarFila['sueldo'])."</td>";
    echo "</tr>";
    }
    echo "</table>";
    }else{
    $RegistrosAEmpezar=0;
    $PagAct=1;

    $Resultado=mysql_query("SELECT * FROM empleado ORDER BY nombres LIMIT $RegistrosAEmpezar, $RegistrosAMostrar",$con);
    echo "<table border='1px'>";
    while($MostrarFila=mysql_fetch_array($Resultado)){
    echo "<tr>";
    echo "<td>".$MostrarFila['nombres']."</td>";
    echo "<td>".$MostrarFila['departamento']."</td>";
    echo "<td>".$MostrarFila['sueldo']."</td>";
    echo "</tr>";
    }
    echo "</table>";
    }

    //******--------determinar las páginas---------******//
    $NroRegistros=mysql_num_rows(mysql_query("SELECT * FROM empleado",$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>";
    ?>

    Ahora cabe hacer mencion que dependiendo de la codificacion que manejen en su index.php y de su base de datos.

    Para mi caso es el siguiente:

    index.php:
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    base de datos:
    utf8 -- UTF-8 Unicode


    Esto es para todos espero les funcione como a mi
  9. avatar erguille 2008-05-02 03:01:19 56 Hola a todos, os cuento mi problema. Estoy intentando implementar este paginador en una aplicación web desarrollada en php, mysql y javascript, pero tengo el problema mencionado de los acentos y eñes. He intentado aplicar los métodos que algunos habeis propuesto y que también he encontrado como solución en otros problemas similares en internet, pero no me funciona nada.

    Estoy aplicandolo en un formulario que muestra en una tabla los registros de una tabla de mysql.

    ¿Alguien podría concretar sobre el código de este ejemplo como solucionar esto?

    Un saludo y muchas gracias de antemano.
  10. avatar gonzalo 2008-04-23 07:28:31 55 Alguien me puede ayudar...este paginador me funciona de lujo, el problema se presenta cuando necesito propagar una variable en la consulta, es decir el query que hago es select * from tabla where campo=$variable;
    AL realizarlo la primera pagina muestra ese filtro, ta al pasar a la segunda, se pierde el valor en la consulta y me muestra todos los datos. NO se de ajax, y conozco algo de PHP

    AYUDA PLEASE

Dejar un comentario


Navegación

Categorias

Archivos

Monitored by eXternalTest