Tabela dinâmica com paginação (Data grid) e ordenação de colunas em HTML, ASP 3.0, CSS e AJAX.

Olá pessoal.

Neste artigo eu vou mostrar como utilizar uma classe em ASP que gera um Data Grid básico em HTML (foi testado com MSSQL e Access).

Características da classe WMTable:
• Paginação automática;
• Ordenação de dados ao clicar na coluna;
• cabeçalho personalizado;
• Cores alternadas de linhas;
• Ao passar o mouse, altera-se a cor da linha;
• Funciona com ou sem ajax;
• Funciona perfeitamente com os navegadores Internet Explorer e Firefox;
• Campos com conteúdo personalizado – este item, pra mim, é especial. Com ele eu consigo adicionar ao conteúdo de uma coluna um link ou uma imagem, por exemplo.

Dependências de arquivos (com link):
- WMTable.asp – Classe para geração das tabelas dinâmicas;
- ajax.js – objeto JavaScript com diversas funções para AJAX;
- pubs.mdb - Um banco de dados de sua preferência. No caso do nosso exemplo, Access;

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

Para isso, é preciso criar dois arquivos:
- tabela.asp – arquivo que utiliza a classe WMTable.
- tabela.html – arquivo que será invocado pelo navegador;

Vejamos então o código fonte 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 UMA 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 pixel ou porcentagem
tbl.ColFields = Array("au_fname","au_lname","phone") ' nomes 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.

Observe a propriedade ColText do arquivo tabela.asp. A nossa tabela HTML possui três colunas e este comando define o texto que será exibido dentro dos campos de cada coluna. Quando nada é informado, o conteúdo do campo HTML será o conteúdo do banco de dados. Todo texto entre dois pontos representa o nome de um campo no banco de dados. Desta forma é possível personalizar todo o conteúdo da tabela.

A propriedade JsFunction informa o nome da função javascript que será invocada na paginação e ordenação das colunas. Esta função contém código AJAX que processa a página tabela.asp, passando alguns parâmetros por querystring. Após o processamento, exibe o resultado obtido. Quando a propriedade não é informada, a função é substituída por outra, nativa do javascript, document.location.

As demais linhas estão bem 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>

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

<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 (cabeçalho, corpo e rodapé). Note que no CSS da página tabela.html existe um item com o nome “cssTable” que é o mesmo nome informado pelo comando setAttribute(“class”) no arquivo tabela.asp.

Mas a grande funcionalidade desta página html esta na função wmTable do java script. Esta função utiliza um objeto que se encontra no arquivo ajax.js, o sack.

Através do XMLHTTP do navegador, o sack facilita a implantação do AJAX em páginas da web. As principais propriedades e funções deste objeto são:
• sack(file): este é o nome do objeto e, ao ser instanciado precisa do parâmetro file, que é o caminho completo do arquivo dinâmico que será processado pelo servidor web. Este arquivo pode ser um ASP, PHP, ColdFusion etc;
• element: 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 em formato texto;
• responseXML: resposta do servidor web em formato XML;
• onLoading: função 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.

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