Paginar resultados con AJAX Javascript
Código Javascript
- Por Programador ASP clásico /
- 02/08/2012 @ 10:56:26 /
- 1005 visitas
Un lugar donde puede ayudar el uso de AJAX es en la paginación de datos mientras otro recurso en la página se está ejecutando. Confeccionaremos una página que muestre un video e inmediatamente en la parte inferior mostraremos los comentarios del video paginados.
Sin utilizar AJAX estamos obligados a recargar completamente la página lo que haría imposible ver el video y recorrer los comentarios en forma completa (considerando que solo parte de los comentarios están en la página)
Veamos y expliquemos cada uno de los archivos que intervienen.
page.html
<html>
<head>
<title>Problema</title>
<script src="funciones.js" language="JavaScript"></script>
</head>
<body>
<object width="425" height="350"><param name="movie"
value="http://www.youtube.com/v/60og9gwKh1o"></param><param
name="wmode" value="transparent"></param><embed
src="http://www.youtube.com/v/60og9gwKh1o" type="application/x-shockwave-flash"
wmode="transparent" width="425" height="350"></embed></object>
<br>
<div id="detalles">
</div>
</body>
</html>
Este archivo HTML no tiene nada de especial. Podemos decir que hemos incrustado un video del sito youtube.
También es importante notar que hemos dispuesto un div vacío cuyo id se llama detalles. Es dentro de este div donde iremos mostrando los comentarios en forma asincrónica.
funciones.js
addEvent(window,'load',inicializarEventos,false);
function inicializarEventos()
{
cargarPagina('pagina2.php');
}
function presionEnlace(e)
{
if (window.event)
{
window.event.returnValue=false;
var url=window.event.srcElement.getAttribute('href');
cargarPagina(url);
}
else
if (e)
{
e.preventDefault();
var url=e.target.getAttribute('href');
cargarPagina(url);
}
}
var conexion1;
function cargarPagina(url)
{
if(url=='')
{
return;
}
conexion1=crearXMLHttpRequest();
conexion1.onreadystatechange = procesarEventos;
conexion1.open("GET", url, true);
conexion1.send(null);
}
function procesarEventos()
{
var detalles = document.getElementById("detalles");
if(conexion1.readyState == 4)
{
detalles.innerHTML = conexion1.responseText;
var ob1=document.getElementById('sig');
if (ob1!=null)
addEvent(ob1,'click',presionEnlace,false);
var ob2=document.getElementById('ant');
if (ob2!=null)
addEvent(ob2,'click',presionEnlace,false);
}
else
{
detalles.innerHTML = '';
}
}
//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captura);
return true;
}
else
return false;
}
function crearXMLHttpRequest()
{
var xmlHttp=null;
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}
Como sabemos la primer función que se ejecuta al terminar de cargar la página es inicializarEventos:
function inicializarEventos()
{
cargarPagina('pagina2.php');
}
Dentro de esta función llamamos a la función cargarPagina con el nombre del archivo php que se ejecuta en el servidor y tiene por objetivo enviarnos los comentarios.
La función cargarPagina es la que crea un objeto de la clase XMLHttpRequest:
var conexion1;
function cargarPagina(url)
{
if(url=='')
{
return;
}
conexion1=crearXMLHttpRequest();
conexion1.onreadystatechange = procesarEventos;
conexion1.open("GET", url, true);
conexion1.send(null);
}
La función procesarEventos:
function procesarEventos()
{
var detalles = document.getElementById("detalles");
if(conexion1.readyState == 4)
{
detalles.innerHTML = conexion1.responseText;
var ob1=document.getElementById('sig');
if (ob1!=null)
addEvent(ob1,'click',presionEnlace,false);
var ob2=document.getElementById('ant');
if (ob2!=null)
addEvent(ob2,'click',presionEnlace,false);
}
else
{
detalles.innerHTML = '';
}
}
Cuando la propiedad readyState tiene un cuatro procedemos a cargar el div "detalles" con el trozo de HTML que se generó en el servidor:
detalles.innerHTML = conexion1.responseText;
Otra cosa muy importante es inicializar el evento click para los hipervínculos siguiente y anterior que contiene todo listado con paginación:
var ob1=document.getElementById('sig');
if (ob1!=null)
addEvent(ob1,'click',presionEnlace,false);
var ob2=document.getElementById('ant');
if (ob2!=null)
addEvent(ob2,'click',presionEnlace,false);
Es importante notar los if. Esto debido a que cuando no hay más registros que mostrar no habrá un hipervínculo. Imagine que la primer página no tiene que tener un hipervínculo "Anteriores".
Por último tenemos el archivo pagina2.php:
<?php
header('Content-Type: text/html; charset=ISO-8859-1');
if (isset($_REQUEST['pos']))
$inicio=$_REQUEST['pos'];
else
$inicio=0;
$conexion=mysql_connect("localhost","root","z80")
or die("Problemas en la conexion");
mysql_select_db("bdajax",$conexion)
or die("Problemas en la seleccion de la base de datos");
$registros=mysql_query("select * from comentarios limit $inicio,3",
$conexion) or die("Problemas en el select:".mysql_error());
$impresos=0;
while ($reg=mysql_fetch_array($registros))
{
$impresos++;
echo "Nombre:".$reg['nombre']."<br>";
echo "Fecha:".$reg['fecha']."<br>";
echo "Comentarios:".$reg['descripcion']."<br>";
echo "<br>";
}
mysql_close($conexion);
if ($inicio==0)
echo "anteriores ";
else
{
$anterior=$inicio-3;
echo "<a href=\"pagina2.php?pos=$anterior\" id=\"ant\">Anteriores
</a>";
}
if ($impresos==3)
{
$proximo=$inicio+3;
echo "<a href=\"pagina2.php?pos=$proximo\" id=\"sig\">Siguientes</a>";
}
else
echo "siguientes";
?>
Lo primero que hacemos es verificar si llega el parámetro pos, como habíamos visto desde el inicializar eventos indicabamos cargar la página pagina2.php sin especificar parámetros. Es decir la variable $incio se inicializa con 0. $inicio nos sirve para saber a partir de cual registro debemos rescatar.
if (isset($_REQUEST['pos']))
$inicio=$_REQUEST['pos'];
else
$inicio=0;
;
Luego de conectarnos y seleccionar la base de datos procedemos a efectuar un select utilizando el limit para rescatar hasta tres registros (es decir página de tamaño 2):
$registros=mysql_query("select * from comentarios limit $inicio,3",
$conexion) or die("Problemas en el select:".mysql_error());
Mediante un while recorremos los registros rescatados y los imprimimos con el comando echo. Además utilizamos un contador para saber cuantos registros se imprimieron:
$impresos=0;
while ($reg=mysql_fetch_array($registros))
{
$impresos++;
echo "Nombre:".$reg['nombre']."<br>";
echo "Fecha:".$reg['fecha']."<br>";
echo "Comentarios:".$reg['descripcion']."<br>";
echo "<br>";
}
Si $inicio vale cero significa que no hay registros anteriores, en caso que sea distinto a cero creamos un hipervínculo y pasamos como parámetro el valor de $inicio menos 3:
if ($inicio==0)
echo "anteriores ";
else
{
$anterior=$inicio-3;
echo "<a href=\"pagina2.php?pos=$anterior\" id=\"ant\">Anteriores
</a>";
}
Para el hipervínculo de "Siguientes" procedemos de forma similar, si $impresos vale 3 significa que posiblemente haya más registros que mostrar, por lo que creamos un hipervínculo y pasamos como parámetro el valor de $inicio más 3.
if ($impresos==3)
{
$proximo=$inicio+3;
echo "<a href=\"pagina2.php?pos=$proximo\" id=\"sig\">Siguientes</a>";
}
else
echo "siguientes";
tags: paginas web con ajax, paginar consultas, paginador web, programacion en javascript, paginar con ajax, paginar ajax, paginar resultados, buscador ajax, paginador en ajax, paginador javascript