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