Olá pessoal. Neste artigo eu vou mostrar como utilizar uma classe em ASP que gera uma tabela HTML.

Com esta classe é possível gerar uma tabela dinâmica, cujo conteúdo está em um banco de dados qualquer (foi testado com MSSQL e Access).

Características da classe WMTable:

• Dinâmica (conteúdo do banco de dados);
• Paginação automática;
• Ordenação de dados ao clicar na coluna;
• Cor de cabeçalho diferenciado;
• Cores alternadas de linhas;
• Ao passar o mouse, altera-se a cor da linha;
• Funciona com ou sem o ajax;
• Funciona perfeitamente com os navegadores Internet Explorer e Firefox;
• Campos com conteúdo personalizado – este item, pra mim, é especial. Com esta funcionalidade eu consigo adicionar ao conteúdo de uma coluna um link ou uma imagem, por exemplo.

Dependências de arquivos:

• WMTable.asp – Classe para geração das tabelas dinâmicas;
• ajax.js – objeto JavaScript com diversas funções para AJAX (um dia posso falar só desse objeto que facilita bastante o desenvolvimento);
• pubs.mdb – Um banco de dados de sua preferência. No caso do nosso exemplo, Access;

Cenário Real:

Atualmente trabalho na atualização de uma intranet totalmente desenvolvida em ASP 3.0 com banco de dados em SQL Server. Na media do possível, quando tenho que atualizar uma determinada área da intranet, aproveito para dar um toque de AJAX nas páginas tornando o sistema mais agradável para se trabalhar e mais rápido também.

A imagem abaixo é uma amostra do resultado que pode ser obtido com a classe WMTable.

Tabela 1

Para gerar a tabela acima, nós vamos precisar criar dois arquivos:

– tabela.asp – este é o arquivo que utiliza a classe WMTable.

– tabela.html – este é o arquivo que será invocada pelo navegador;

Vejamos então o códigos destes arquivos:

TABELA.ASP

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!--#include file="WMTable.asp"-->
<%
' CONEXÃO COM O BANCO DE DADOS
' MAIORES INFORMAÇÕES em http://www.connectionstrings.com/
connString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="& Server.MapPath("pubs.mdb") &";"

' CRIA UM OBJETO WMTable
Set tbl = new WMTable

' ATRIBUTOS DA TAG <TABLE>
' A PROPRIEDADE SETATTRIBUTE PODE SER UTILIZADA PARA QUALQUER ATRIBUTO
' EXISTENTE DE UM TABELA
tbl.setAttribute("class") = "cssTable" 
tbl.setAttribute("width") = "70%"
tbl.setAttribute("align") = "center"

' COLUNAS
tbl.ColNames 	= Array("Nome","Sobrenome","Fone")	' Título das colunas
tbl.ColWidth	= Array("40%","40%","20%")		' largura em px ou porcentagem
tbl.ColFields	= Array("au_fname","au_lname","phone") ' nome dos campos no banco de dados
tbl.ColAlign	= Array("left","left","left")			' alinhamento das colunas
tbl.ColText		= Array("" _
,"<a href=""javascript:void(0)"" onclick=""alert(':au_fname: :au_lname:');"">:au_lname:</a>" _
,"")	'  Conteúdo, efetivamente, das colunas. 

' Imagens que indicam que a ordem da coluna (crescente ou descrescente)
tbl.ImageAsc   	= "/includes/class/sort_asc.png"
tbl.ImageDesc	= "/includes/class/sort_desc.png"

tbl.ConnectionString 	= connString				' string de conexão com o banco de dados
tbl.Source 			= "SELECT * FROM [authors]"	' comando que será executado no banco
tbl.Paginate			= True		' Indica se deve ser feita a paginação
tbl.PageSize			= 10		' indica a quantidade de registros por página

tbl.JsFunction = "wmTable(':qString:');"	' esta é a função JavaScript que utiliza o ajax

tbl.Create("tblTeste") ' função que gera o código HTML
Set tbl = Nothing ' Destrói o objeto para não ficar ocupando memória do servidor web
%>

O banco de dados pubs.mdb possui uma tabela chamada authors que é uma cópia da tabela authors do banco pubs do SQL Server 2000. Eu aconselho você usar um banco de dados qualquer que já possua, pois assim consegue compreender melhor a forma de utilização da classe.

Neste arquivo eu gostaria de chamar a atenção para a propriedade ColText.

A nossa tabela HTML possui três colunas e o comando ColText define o texto que será exibido nos campos desta coluna. Quando nada é informado o conteúdo do campo HTML será o resultado do banco de dados. Todo conteúdo entre dois pontos representa o nome de um campo no banco de dados. Desta fora eu consigo personalizar todo o conteúdo da tabela.

Outra propriedade importante é a JsFunction que nada mais é que uma função javascript que através de um objeto XMLHTTP invoca a página tabela.asp passando alguns parâmetros por querystring e exibe o resultado obtido. Quando a propriedade não é informada a função é substituída pelo comando document.locarion.

As linhas restantes estão comentadas, assim, acredito que explicações adicionais não se fazem necessárias, porém, se alguém tiver dúvidas basta comentar o artigo que eu respondo.

Agora vamos ver o código do arquivo tabela.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>WMTable</title>
<style type="text/css">
<!--
/* FONTE PADRÃO */
body, th, td, select { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;} 

/* CABEÇALHO DA TABELA */
.cssTable thead th { color:#FFFFFF; background-color:#FF794A; cursor:pointer; } 		

/* LINHA PAR */
.cssTable tbody tr { color:#000000; background-color:#EEEEE6; border: 1px #CCCCCC; } 

/* LINHA ÍMPAR */
.cssTable tbody .even { color:#000000; background-color:#E2E2E2; border: 1px #CCCCCC; } 

/* LINHA AO PASSAR O MOUSE */
.cssTable tbody tr:hover { background-color:#FFCC99; }

/* MARGENS INTERNAS E EXTERNAS DOS CAMPOS DA TABELA  */
.cssTable th, .cssTable td { padding:5px; margin:0px; }
-->
</style>
<script type="text/javascript" src="ajax.js"></script>
<script>
// FUNÇÃO AJAX QUE EXECUTA A PÁGINA TABELA.ASP
function wmTable( qString ) {
	qString 	= (qString)?qString:'rnd=' + Math.random();
	var ajax 	= new sack( 'tabela.asp' );
ajax.element	= 'divWMTable';
	ajax.onError	= function(){ this.elementObj.innerHTML = this.response; };
	ajax.runAJAX( qString );
}

// AO CARREGAR A PÁGINA HTML
window.onload = function(){ wmTable() };
</script>
</head>
<body>
<div id="divWMTable"></div>
</body>
</html>

[b]Vamos entender o código desta página. A classe WMTable gera um tabela com a seguinte estrutura:[/b]

<table id="id_da_tabela">
  <thead>
    <tr>
      <th>Coluna 1</th>
      <th>Coluna 2</th>
      <th>Coluna 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Texto1</td>
      <td>Texto1</td>
      <td>Texto1</td>
    </tr>
    <tr class="even">
      <td>Texto1</td>
      <td>Texto1</td>
      <td>Texto1</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3"> texto da paginação</td>
    </tr>
  </tfoot>
</table>

Com essa estrutura fica fácil desenvolver um estilo (CSS) para cada bloco da tabela. Percebam que no CSS da página existem o itens com o nome “cssTable” que é o mesmo nome informado pelo comando setAttribute(“class”) no arquivo tabela.asp.

Mas a grande funcionalidade desta página é a função wmTable. Esta função utiliza um objeto que se encontra no arquivo ajax.js. Este objeto pode ser baixado em: http://www.twilightuniverse.com/downloads/sack/tw-sack.js

• Este objeto utiliza o XMLHTTP do browser do cliente. A vantagem deste objeto é que ele facilita a implantação de código com a famosa técnica conhecida por AJAX. Veja as principais propriedades e funções deste objeto:
• sack(file): este é o nome do objeto e, ao ser instanciado precisa do parâmetro file, que é o caminho do arquivo dinâmico que será processado pelo servidor web. Este arquivo pode ser um ASP, PHP, ColdFusion entre outros;
• element: nada mais é que o ID do elemento HTML que receberá a resposta do servidor web. Este elemento pode ser uma div, um input text ou outra tag qualquer.
• reponse: resposta do servidor web no formato texto;
• responseXML: resposta do servidor web no formato de um XML;
• onLoading: uma função que é executada enquanto o servidor web está processando a página dinâmica. Eu utilizo muito esta função para mostrar a mensagem “carregando…” para o usuário;
• onError: função executada quando a página dinâmica contem erro em seu script;
• onCompletation: função executada após o término do processamento da página dinâmica pelo servidor web.
• runAJAX( QueryStrin ): esta é a função que faz a requisição para o servidor web.

E para finalizar, segue abaixo o código da classe WMTable.asp que pode ser baixado clicando aqui.

Agora é só testar sua tabela com paginação e ordenação de campos. Fácil, prático e rápido.