Como hacer tabla dinamica en ajax

cuasatar · #1 (**permalink**) 08/10/2011, 19:02

Hola a todos. Apenas me he estado metiendo en ajax pero me llama mucho la atención y por eso quiero aprender a programarlo.

En estos momentos he hecho una tabla dinamica con php y mysql que con peticiones de base de datos muestra alarmas de los ultimos informes que han llegado, algo asi por el estilo. Obvio la tabla es mas grande pero para ilustrar creo que esto queda claro.

Código HTML:

<table>
<tr>
<td>ciudad</td>
<td>informe1</td>
<td>informe2/td>
<td>informe3</td>
</tr>
<tr>
<td>ciudad1</td>
<td>alarma</td>
<td>alarma2/td>
<td>alarma</td>
</tr>
<tr>
<td>ciudad2</td>
<td>alarma2</td>
<td>alarma3/td>
<td>alarma3</td>
</tr>

</table>

Donde las alarmas son simples dibujos de colores que se muestran segun han llegado algunos informes.

Ahora con ayuda de javascript lo he querido refrescar automaticamente pero es muy molesto el efecto del parpadeo y me gustaria usar ajax por primera vez para que la consulta sea mas agradable a la vista.

Agradezco si me pudieran dar ideas sobre como podria implementar esto en Ajax. Recien hoy lei mis primeras instrucciones en este lenguaje pero creo que podria adaptar lo que he hecho. Si alguien conoce algo parecido que haya sido hecho en ajax para verlo o si me pueden dar ideas de como implementarlo lo agradeceria mucho. Gracias de antemano por la colaboración.

Artificium · #2 (**permalink**) 08/10/2011, 20:06

A ver, si dices que ya sabes alguito de Ajax debes entender que Ajax no es ningún lenguaje, es una técnica. Bueno, para hacer lo que quieres es muy fácil, en el archivo de procesamiento debes hacer la consulta que haces con PHP, y la impresión, o sea, exactamente lo que haces para mostrar la tabla dinámica. Lo que se obtiene mediante Ajax es un código, HTML, el cual debes "imprimirlo" mediante innerHTML en un div, eso sería todo.

cuasatar · #3 (**permalink**) 08/10/2011, 20:51

Tienes razon, por error escribi que ajax es un lenguaje y como tal no lo es (error de redacción). Para complementar la pregunta que hice la tabla que muestro viene de archivos que le llegan al servidor desde muchos lados y por tanto el usuario no necesita hacer ningun tipo de iteración (es decir no oprime botones, ni escribe datos ni nada por el estilo). Como los ejemplos que he visto en ajax no se parecen a lo que he diseñado no se muy bien como hacerlo. Si me pueden dar mas luces lo agradeceria.

Artificium · #4 (**permalink**) 08/10/2011, 21:08

De acuerdo, te daré un ejemplo que tal vez no hayas visto. A lo mejor has visto algo así:

Código:

        var ajax = getHttpRequest();
		
	var url = 'procesador.php?tabla=1'+Math.random(); 
	ajax.open('GET', url, false);
	return ajax.onreadystatechange = function() {
		if (ajax.readyState == 4) {
			document.getElementById('divTabla').innerHTML = ajax.responseText;
		}
	}
	ajax.send(null);

Ahora el código de procesador.php

Código:

if (isset($_GET['tabla'])) {
  include('funciones');
  imprime_tabla();
}

La función imprime_tabla obviamente es la que se encarga de hacer la consulta sql e imprimir, es prácticamente todo el código donde haces eso. Pero lo he puesto en otro archivo por que también debes hacer un include en el archivo donde hasta ahora mostrabas la tabla y ejecutar esa función para mostrarla. De este modo al cargar la página aparecerá la tabla y no hará falta ejecutar ninguna función ajax.

Falta un dato, debes usar en JavaScript el método setInterval para ejecutar la función ajax que recargue la tabla, de este modo automáticamente cada cierto tiempo se hará la recarga. Espero que te sirva.

cuasatar · #5 (**permalink**) 08/10/2011, 21:56

Gracias por ese cable, ya tengo la idea mas clara. Una ultima pregunta y con eso creo que podre empezar a usar Ajax.

Cita:

Falta un dato, debes usar en JavaScript el método setInterval para ejecutar la función ajax que recargue la tabla, de este modo automáticamente cada cierto tiempo se hará la recarga. Espero que te sirva.

En mi diseño original use el set interval para decirle a la pagina que se recargara cada minuto y por supuesto le puse la condición en el body, es decir <body onload="recargar()"> Obviamente como la idea ahora es que recargue la tabla y no la pagina completa como deberia hacer esa invocación? en el div donde se imprimira la tabla? se hace con el evento onload?(creo que el onload solo sirve para el body). O por el contrario debo hacer el set interval sobre la funcion imprime_tabla?

Muchas gracias por el tiempo y la paciencia (literalmente solo hasta el dia de hoy me puse a ver tutoriales de ajax) No lo veo complicado y hasta es muy flexible y practico.

Artificium · #6 (**permalink**) 09/10/2011, 06:54

A ver, si pones esto: <body onload="recargar()"> no indica que la recarga se va a dar en el body, en todo el body, indica que cuando el body se termine de cargar se va a ejecutar esa función. Pensé que sabías un poco más de JavaScript. El elemento donde se "imprime" la tabla se determina en esta parte del código: document.getElementById('divTabla').innerHTML = ajax.responseText;

cuasatar · #7 (**permalink**) 09/10/2011, 07:35

Creo que a pesar de que puse <body onload="recargar()"> creo que era claro que invocaba a la función para que recargara la pagina y con set interval cada x segundos vuelvo a llamar la función.

Si entiendo de javascript aunque no lo domino tanto como php y mysql. Creo que ya se como lo implementare. Si tengo una duda puntual ya te estare molestando. De verdad muchas gracias por la colaboración. Si doy con el chiste ya lo estare comentando.