Paginacin sobre PHP, MySQL, AJAX por Krilbert Cuantas veces han hecho una consulta a una base

de datos y les regresa tanta informacin que mejor les gustara mostrarla por pedazos o grupos de n registros. Ahh pues estas en el tutorial indicado hoy veremos como hacer ese tipo de paginacin y como valor agregado :P lo haremos tambin utilizando AJAX para no tener que hacer un reload de la pgina, si no tienes ni idea de lo que es AJAX por favor primero lee esto: Qu es AJAX? Ahora bien vamos organizando las cosas, antes que nada necesitamos saber que queremos hacer, as que lo anotamos: Yo krilbert quiero una pagina donde van a aparecer una lista de nmeros (pginas) y que al hacerle clic en cada uno me muestre los resultados de dicha pgina dentro de un tag div. Tambin quiero controlar de cuantos registros va a ser cada pgina y al final mostrar un mensaje descriptivo diciendo: Total Registros: ? ?? Registros cada una Pgina de Vamos a ver cuantos archivos vamos a necesitar: conf.php: aqu tendremos variables de uso global como para el acceso a la base de datos, entre otros. buscar.php: Esta se va a encargar de hacer la consulta a la base de datos para mostrar los resultados y vamos a tener acceso a esta pgina mediante ajax index.php: Esta ser nuestra pgina principal la que el usuario va a ver cuando este navegando en nuestro site. oks veamos nuestro conf.php <? $host = "localhost"; $usr = ""; $pwd = ""; $bdatos = ""; $TAMANO_PAGINA = 10; $busqueda = "select * from alumnos"; ?> No hay mucho que explicar en este codigo simplemente son nombres de variables que utilizaremos mas adelante, ya debes estar familiarizado con host, usr, pwd, bdatos que son para hacer la conexin a la base de datos. Tamano_pagina es la variable en la que tenemos guardada el nmero de registros que habr por pgina. Y en bsqueda tendremos la cadena en SQL de nuestra bsqueda,

aqu tenemos que incluir los criterios de bsqueda con WHERE, en pocas palabras es la sentencia que usaremos para extraer los registros de la base de datos. Ahora vamos a hacer el archivo buscar.php que es el siguiente: <? include_once ("conf.php"); $kon = mysql_connect ($host, $usr, $pwd) or die ("Error de Conexion"); mysql_select_db ($bdatos, $kon) or ("Error al conectar a la bdatos"); $pagina = $_GET["pagina"]; if (!$pagina) { $inicio = 0; $pagina=1; } else { $inicio = ($pagina - 1) * $TAMANO_PAGINA; } $sql = mysql_query($busqueda, $kon) or die("Error de busqueda"); $total_registros = mysql_affected_rows(); $total_paginas = ceil($total_registros / $TAMANO_PAGINA); $sql = mysql_query($busqueda . " LIMIT $inicio, $TAMANO_PAGINA;", $kon); while ($row = mysql_fetch_array($sql)){ echo $row['nombre'] . "<br>"; } echo "<br>"; echo "<b>Total Registros: " . $total_registros . "<br>"; echo $TAMANO_PAGINA . " registros cada una<br>"; echo "P&aacute;gina " . $pagina . " de " . $total_paginas . "</b><br />"; mysql_close ($kon); ?> Expliquemos el cdigo :P Empezamos con un include_once no creo que haya dudas es para traerse el archivo de configuracin y poder utilizar las variables que creamos en ella. Nos sirve para las siguientes dos lneas de cdigo: $kon = mysql_connect ($host, $usr, $pwd) or die ("Error de Conexion"); mysql_select_db ($bdatos, $kon) or ("Error al conectar a la bdatos"); aqu nos estamos conectando a la base de datos con la informacin que pusimos en las variables en el archivo conf.php, host, usr, pwd, la funcion die() lo que hace es, en caso de que haya un error, muestra el mensaje que se ponga entre comillas y se deja de ejecutar la pgina. Entonces despus de estas lneas ya nos conectamos a la base de datos y seleccionamos la tabla de dicha base de datos.

Ahora, Cmo vamos a saber cual pgina vamos a mostrar? Ah pues.. por medio de GET pasaremos la variable pgina que tendr el valor de la pgina que tenemos que mostrar. Si no existe esa variable podemos suponer que la pagina a mostrar es la primera as que el cdigo sera: $pagina = $_GET["pagina"]; if (!$pagina) { $inicio = 0; $pagina=1; } else { $inicio = ($pagina - 1) * $TAMANO_PAGINA; } Entonces aqu ya tenemos la pgina en la que estamos y el inicio que es el primer registro donde vamos a empezar, por ejemplo si en cada pagina vamos a mostrar 5 registros (variable tamano_pagina), y queremos ver la pgina 3 $inicio = (3-1) * 5 $inicio = 10 Si se fijan la pagina 1 es del registro 0-4, la segunda es del 5-9 y la tercera del 10-14, entonces ya tenemos que la pagina 3 empieza en el registro 10. Es muy importante dominar este tema ya que utilizaremos el parmetro LIMIT de SELECT. LIMIT necesita dos parmetros que son el nmero de registro en el que va a empezar a regresar los datos y la cantidad de registros que se va a traer despus del registro que pusimos, as que para traernos la pgina 3 seria: SELECT * FROM personas LIMIT 10, 5 Sigamos con nuestro cdigo, ahora lo que tenemos que hacer es ejecutar un sql que nos traiga el total de registros en la bsqueda, si no fue error de dedo, el total esta en negritas y es porque con esta sentencia nos vamos a traer todos los registros y no nada mas los registros de la pgina en la que estemos, eso lo vamos a hacer despus pero ahorita ejecutamos ese query porque recuerden que tenemos que mostrarle al usuario los datos del total de registros y total de paginas, etc asi que para eso es este codigo: $sql = mysql_query($busqueda, $kon) or die("Error de busqueda"); $total_registros = mysql_affected_rows(); $total_paginas = ceil($total_registros / $TAMANO_PAGINA); Nota: la funcin ceil() es para redondear uno arriba el resultado de la divisin, as que si el resultado fuera 1.2 regresara 2. Ahora si repetimos el query pero ahora si va enfocado nada mas a la pgina que queremos mostrar:

$sql = mysql_query($busqueda . " LIMIT $inicio, $TAMANO_PAGINA;", $kon); while ($row = mysql_fetch_array($sql)){ echo $row['nombre'] . "<br>"; } Ah pueden ver como ponemos LIMIT y sus respectivos parmetros. Tambin hacemos un recorrido por los registros que nos devolvi el query, si tienes alguna duda revisa este tutorial antes de seguir Bueno despus nada mas mostramos la informacin general y cerramos la conexin a la base de datos echo "<br>"; echo "<b>Total Registros: " . $total_registros . "<br>"; echo $TAMANO_PAGINA . " registros cada una<br>"; echo "P&aacute;gina " . $pagina . " de " . $total_paginas . "</b><br />"; mysql_close ($kon); uff cuantas lineas de codigo pero bien explicadas :P ya casi terminamos nada mas nos falta el archivo index.php mediante el cual con ayuda de AJAX mandaremos llamar a buscar.php Este es el cdigo de index.php <? include_once ("conf.php"); $kon = mysql_connect ($host, $usr, $pwd) or die ("Error de Conexion"); mysql_select_db ($bdatos, $kon) or ("Error al conectar a la bdatos"); $sql = mysql_query($busqueda, $kon) or die("Error de busqueda"); $total_registros = mysql_affected_rows(); $total_paginas = ceil($total_registros / $TAMANO_PAGINA); ?> <html> <head> <script language="javascript" type="text/javascript"> var url = "buscar.php?pagina="; var http = getXmlHttpObject(); function handleHttpResponse(){ if (http.readyState == 1){ document.getElementById('resultado').innerHTML = "Cargando..."; } if (http.readyState == 4){ results = http.responseText;

document.getElementById('resultado').innerHTML = results; } } function sendQuerystring(pagina){ http.open("GET", url + pagina, true); http.onreadystatechange = handleHttpResponse; http.send(null); } function getXmlHttpObject(){ var xmlhttp; /*@cc_on @if (@_jscript_version >= 5) try{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ xmlhttp = false; } } @else xmlhttp = false; @end @*/ if (!xmlhttp && typeof XMLHttpRequest != 'undefined'){ try{ xmlhttp = new XMLHttpRequest(); } catch (e){ xmlhttp = false; } } return xmlhttp; } </script> <link href="style.css" rel="stylesheet" /> </head> <body> <h1>Paginacin con AJAX</h1> <br><? if ($total_paginas > 1){ for ($i=1;$i<=$total_paginas;$i++){ echo "<span class=\"link\" onClick=\"sendQuerystring('$i')\">$i</span> ";

} }else{ echo "$i "; } ?> <br><br> <div id="resultado"> Escoje alguna pgina para mostrar los resultados </div> <br> </body> </html> Si seguiste el tutorial de Introduccin a AJAX 101 no tendrs ningn problema en entender este cdigo, ms o menos te lo explico pero es mejor que leas el tutorial. Hacemos lo mismo que en el buscar.php, es decir, mandamos llamar el conf.php y hacemos la conexin con la base de datos, para que? Ahh pues porque en la pagina principal tenemos que mostrar todas las paginas con sus links, esto nada mas se va a hacer una sola vez. Despus viene el codigo HTML con la definicin de AJAX, repito, nada del otro mundo si seguiste el tutorial de Introduccin a AJAX 101, lo nico que cambia es: var url = "buscar.php?pagina="; y claro porque tenemos que hacer referencia a nuestro archivo buscar.php con la variable de pagina (recuerda para que nos muestre esa pgina). Ahora lo unico que nos falta poner son las paginas que tiene nuestra busqueda y el codigo es: <? if ($total_paginas > 1){ for ($i=1;$i<=$total_paginas;$i++){ echo "<span class=\"link\" onClick=\"sendQuerystring('$i')\">$i</span> "; } }else{ echo "$i "; } ?> Nada mas hace un ciclo de 1 al nmero de paginas que hay, yo lo puse con el TAG <span> porque asi le puedes dar formato con CSS y queda muy bien. Cualquier duda pues aqu estamos espero no revolverlos pero mi intencin era explicarles el cdigo para que ustedes puedan hacer sus propios scripts Aki pueden bajar el codigo fuente y el ejemplo final ya con la hoja de estilos