[Resolvido] Ordenar Tabela com AJAX

[afbartels 0]

Pessoal estou querendo ordenar uma tabela que lista dados do banco, de acordo com a opção do usuário. Meu código é o seguinte:

 

 

Index.php

.............

<script language="javascript1.2" src="bibliotecaAjax.js"></script>
<script language="JavaScript1.2" src="ordena.js" > </script>

												.............

//Campo Jump contendo o tipo de seleção

<form action="java script:void%200" >
			  <select name="estado" class="style3" >
				<option value="DI">Data Inclusão</option>
				<option value="DE">Data Exclusão</option>
				<option value="E">Estado</option>
				<option value="T">Tipo</option>
			  </select>
</form>

												...........

//Tabela de resultados
<table id="table" width="100%" class="style3" cellspacing="0" cellpadding="0" border="1" bordercolordark="#FFFFFF">

while ($aux = mysql_fetch_array($qry)) {
   echo '<tr  bgcolor="#EEEEEE" height="20">';

											   ...........  // conteudo restante para impressao dos dados
</table>

 

bibliotecaAjax.js

var ajax;
var dadosUsuario;

// ------- cria o objeto e faz a requisição -------
function requisicaoHTTP(tipo,url,assinc){
	if(window.XMLHttpRequest){	  // Mozilla, Safari,...
		ajax = new XMLHttpRequest();
	} 
	else if (window.ActiveXObject){	// IE
		ajax = new ActiveXObject("Msxml2.XMLHTTP");
		if (!ajax) {
			ajax = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}	  
	
	if(ajax)	// iniciou com sucesso
		iniciaRequisicao(tipo,url,assinc);
	else
		alert("Seu navegador não possui suporte a essa aplicação!");
}

// ------- Inicializa o objeto criado e envia os dados (se existirem) -------
function iniciaRequisicao(tipo,url,bool){
	ajax.onreadystatechange=trataResposta;
	ajax.open(tipo,url,bool);
	ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
	//ajax.overrideMimeType("text/XML");   /* usado somente no Mozilla */
	ajax.send(dadosUsuario);
}


// ------- Inicia requisição com envio de dados -------
function enviaDados(url){
	criaQueryString();
	requisicaoHTTP("POST",url,true);
}


// ------- Cria a string a ser enviada, formato campo1=valor1&campo2=valor2... -------
function criaQueryString(){
	dadosUsuario="";
	var frm = document.forms[0];
	var numElementos =  frm.elements.length;
	for(var i = 0; i < numElementos; i++)  {
		if(i < numElementos-1)  {
			dadosUsuario += frm.elements[i].name+"="+encodeURIComponent(frm.elements[i].value)+"&";
		} else {
			dadosUsuario += frm.elements[i].name+"="+encodeURIComponent(frm.elements[i].value);
		}
	}
}

// ------- Trata a resposta do servidor -------
function trataResposta(){
	if(ajax.readyState == 4){
		if(ajax.status == 200){
			trataDados();  // criar essa função no seu programa
		} else {
			alert("Problema na comunicação com o objeto XMLHttpRequest.");
		}
	}
}

 

ordena.js

window.onload = function(){
	var estado = document.getElementById("estado");
	estado.onchange = function() { exibeFrete(estado); }
}

function exibeFrete(estado){
	if (estado == null) { return; }
	selecionado = estado.options[estado.selectedIndex].value;
	var url="ordena.php?estado="+encodeURIComponent(selecionado);
	requisicaoHTTP("GET",url,true);
}

function trataDados(){
	var info = ajax.responseText;  // obtém a resposta como string
	var resposta = document.getElementById("table");
	resposta.innerHTML = info;
}

 

ordena.php

include "basededados/conexaomysql.php";

$gmtDate = gmdate("D, d M Y H:i:s"); 
header("Expires: {$gmtDate} GMT"); 
header("Last-Modified: {$gmtDate} GMT"); 
header("Cache-Control: no-cache, must-revalidate"); 
header("Pragma: no-cache");
header("Content-Type: text/html; charset=ISO-8859-1");

$ordem = $_GET["ordemtab"];

if ($ordem == 'DI') {
 $qry = mysql_query("SELECT * FROM documento ORDER BY dataaquisicao DESC",$id);
 
 }else if ($ordem == 'DE') {
 $qry = mysql_query("SELECT * FROM documento ORDER BY datadescarte DESC",$id);
 
 }else if ($ordem == 'E') {
 $qry = mysql_query("SELECT * FROM documento ORDER BY estadodoc DESC",$id);
 
 }else if ($ordem == 'T'){
 $qry = mysql_query("SELECT * FROM documento ORDER BY numof numdesp DESC",$id);
 }

[afbartels 0]

Pessoal, consegui resolver meu problema.

Ao invés de chamar pelo onload da página, fiz pelo evento onchange do jump, chamando direto a função exibeFrete().

 

Valeu pela ajuda.