Paginar resultados con AJAX Javascript

Blog de ASP Clásico

Paginar resultados con AJAX Javascript

Código Javascript

Por ASP clásico / 02/08/2012 @ 10:56:26 / 1350 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";

Descubre más sobre cómo simplificar y optimizar tu trabajo empresarial en el Blog de CoreASP.

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

Descargo de Responsabilidad:

El contenido y los recursos que ofrecemos en CoreASP están destinados únicamente a proporcionar herramientas y ejemplos prácticos para el desarrollo en ASP Clásico. Esta información es de carácter general y no debe considerarse asesoramiento profesional o técnico específico para tu proyecto. Aunque hacemos todo lo posible por asegurar la calidad y precisión de los recursos compartidos, no garantizamos que sean completamente libres de errores o que se ajusten perfectamente a todas las situaciones. CoreASP no se responsabiliza por cualquier pérdida, daño o inconveniente derivado del uso directo o indirecto de los recursos o información proporcionada. Además, CoreASP no respalda ni asume responsabilidad por enlaces o contenido de terceros que puedan estar referenciados en nuestra plataforma. Todos los derechos de propiedad intelectual sobre el contenido y recursos publicados en CoreASP pertenecen a CoreASP o a sus respectivos propietarios, y su uso está sujeto a las condiciones de la licencia especificada para cada recurso. Nos reservamos el derecho de modificar este descargo de responsabilidad en cualquier momento sin previo aviso. Para más detalles, consulta el documento completo de términos y condiciones.

Paginar resultados con AJAX Javascript

Paginar resultados con AJAX Javascript

Código Javascript

Secciones

Lo último

Crear e instalar certificado SSL autofirmado en IIS

Como enviar SMS desde ASP clásico

Hashing de contraseñas en ASP clásico

Como configurar Cloudflare para bloquear paises

Como instalar certificado ssl en CentOS 7

Historial de Restauraciones de Base de Datos en SQL Server

Contacto

Acceso rápido

Blog