Artigos .NET Manipulando tabelas com jQuery DataTable - Revista .NET Magazine 103
Artigo do tipo Exemplos Práticos
Recursos especiais neste artigo:
Conteúdo sobre boas práticas.

DataTables – Manipulando tabelas com jQuery DataTable
Praticamente toda aplicação tem a necessidade de exibir listas de informações, seja para relatórios ou simples consultas do usuário. No ambiente WEB estas listas são normalmente exibidas através do elemento Table. O plugin DataTables do jQuery nos fornece uma série de facilidades para trabalharmos com tables em HTML, possibilitando a definição de filtros automáticos, ordenação, agrupamento dentre muitas outras, de forma transparente e extremamente leve. Neste artigo veremos as principais características e possibilidades de customização deste plugin através de exemplos com HTML, JavaScript e objetos JSON, além da interação com o servidor através de uma aplicação ASP.NET MVC.


Em que situação o tema é útil
Este tema é útil a todos que tenham a necessidade de exibição de relatórios ou consultas em seus aplicativos, permitindo que estes recursos sejam desenvolvidos de maneira muito mais produtiva para o desenvolvedor, e dinâmica para o usuário final de sua aplicação.

Todo sistema passa por um fluxo natural de entrada, processamento e saída de informações, sendo que, de acordo com a tecnologia empregada pode ser mais fácil ou mais difícil a implementação deste fluxo. Vejamos por exemplo o fluxo de saída, quando falamos de saída de informação estamos nos referindo à resposta que o sistema dará para o usuário e duas formas de respostas que auxiliam os usuários em suas análises e tomadas de decisão são os relatórios e as consultas. Estas duas saídas têm como característica a análise de um volume agrupado de informações e são normalmente exibidas em forma de tabela, semelhantes às planilhas do Excel.

Dependendo da tecnologia a geração destes resultados pode ser um pouco mais trabalhosa. Vejamos por exemplo dois tipos de aplicação tradicionais: Desktops e Web. Aplicações Desktop são por natureza Statefull, ou seja, elas armazenam estado. Desta forma, se torna mais fácil trabalhar com tabelas nestes cenários, por outro lado as aplicações Web são de natureza stateless, o que torna mais complexa a manipulação de dados. Em uma aplicação desktop temos controle total dos dados em memória enquanto que nas aplicações Web cada requisição ao servidor resultado em um novo ciclo de vida, sendo que apenas durante o ciclo de vida desta requisição é que temos acesso aos dados em memória do servidor. Um recurso muito utilizado para facilitar isso é o Ajax, onde apenas partes da página são atualizadas através de informações interações pontuais com o servidor.

Por outro lado, temos ainda as iniciativas do mercado para tentar dar ao ambiente Web uma cara mais Desktop, buscando facilitar o desenvolvimento e aumentar a produtividade do mesmo. Estas iniciativas se dão através da disponibilização de componentes server side, que na maioria das vezes fornecem uma linguagem de marcação própria para o desenvolvedor e quando processados por uma requisição Web geram todo o HTML necessário para renderizção no browser.

Um bom exemplo disso é o componente GridView do ASP.NET WebForms como podemos observar no exemplo da Listagem 1.

Listagem 1. Exemplo de GridView wm WebForm


  01     <%@ Page Title="Home Page" Language="C#" 
          MasterPageFile="~/Site.master"
         AutoEventWireup="true" CodeBehind="Default.aspx.cs" 
          Inherits="WebApplication1._Default" %>
  02
  03     <asp:Content ID="HeaderContent" runat="server" 
         ContentPlaceHolderID="HeadContent">
  04     </asp:Content>
  05     <asp:Content ID="BodyContent" runat="server" 
         ContentPlaceHolderID="MainContent">
  06         <h2>
  07             Exemplo GRID View
  08         </h2>
  09         <p>
  10         </p>
  11         <asp:GridView runat="server" ID="grdDadosListagem" 
              AutoGenerateColumns="false">
  12                 <Columns>
  13                     <asp:BoundField DataField="Nome" HeaderText="NOME" />
  14                     <asp:BoundField DataField="Idade" HeaderText="IDADE" />
  15                 </Columns>
  16         </asp:GridView>
  17     </asp:Content>

Como podemos ver na Listagem 1 o grid view possui uma linguagem própria de marcação no WebForm, onde na linha 11 temos a definição do mesmo, seguido da linha 13 e 14 onde definimos que temos uma coluna que receberá os dados a partir de um data source, indicando o nome das propriedades deste data source para cada coluna.

Esta grid pode ser acessada durante o ciclo de vida da requisição, sendo que a mesma é criada no início deste ciclo e destruída ao término do mesmo. Para popularmos ela, teríamos apenas que ter uma lista de objetos com as propriedades Nome e Idade, como mostrado na Listagem 2.

Listagem 2. Código de carga dos dados na grid


  01        protected void Page_Load(object sender, EventArgs e)
  02             {
  03                 IList<object> lista = new List<object>();
  04                 lista.Add(new { Nome = "Ricardo Coelho", Idade = 26 });
  05                 lista.Add(new { Nome = "Pelé Silva ", Idade = 56 });
  06                 lista.Add(new { Nome = "Maradona Hermano", Idade = 50 });
  07                 lista.Add(new { Nome = "Leonel Messi", Idade = 24 });
  08                 lista.Add(new { Nome = "Christiano Ronal", Idade = 26 });
  09     
  10                 grdDadosListagem.DataSource = lista;
  11                 grdDadosListagem.DataBind();
  12             }

Na Listagem 2 temos um exemplo de como alimentar o gridview, onde criamos uma lista de objetos e associamos a mesma à propriedade DataSource da gridview (linha 10). Ao ser executada esta grid view irá gerar um resultado renderizado em HTML, como mostrado no exemplo da Listagem 3.

Listagem 3. Código HTML gerado pelo ASP.NET para a GridView


  01      <table cellspacing="0" rules="all" border="1"
          id="MainContent_grdDadosListagem"
          style="border-collapse:collapse;">
02             <tr>
03                     <th scope="col">NOME</th>
                       <th scope="col">IDADE</th>
04             </tr><tr>
05                     <td>Ricardo Coelho</td><td>26</td>
06             </tr><tr>
07                     <td>Pelé Silva </td><td>56</td>
08             </tr><tr>
09                     <td>Maradona Hermano</td><td>50</td>
10             </tr><tr>
11                     <td>Leonel Messi</td><td>24</td>
12             </tr><tr>
13                     <td>Christiano Ronal</td><td>26</td>
14             </tr>
15      </table>

Observando a Listagem 3 podemos ver que o código gerado trata-se de HTML puro, onde a grid view transforma-se em um elemento table e suas linhas e colunas se transformam em elementos tr e td.

Este tipo de componente traz certa produtividade para o desenvolvedor pois o mesmo se preocupa mais com o server side da aplicação, deixando que o ASP.NET gere os principais códigos client side, por outro lado, desta forma o desenvolvedor acaba perdendo o controle do HTML além de ter que obedecer ao ciclo de vida dos componentes server side.

Pensando nisso a Microsoft criou o ASP.NET MVC, onde temos a implementação do design pattern MVC para o ASP.NET. Um dos principais benefícios do MVC é justamente o controle total do HTML que ele fornece ao desenvolvedor, deixando de existir estes controles server sides e fazendo com que tenhamos que implementar nossas views utilizando código HTML nativo. Como não se pode ter tudo na vida, se ganha no controle do HTML, mas perde-se em produtividade, pois o mesmo exemplo acima para ser feito em MVC geraria mais código, pois teríamos que escrever toda a table HTML e seu conteúdo através da iteração em um loop.

Uma maneira de se ter mais produtividade sem perder o controle do código HTML é através de bibliotecas client side. Atualmente a mais popular, para uso geral, é o jQuery que possui uma rica API de seleção e manipulação dinâmica de elementos da página. Com o jQuery surgiram diversas bibliotecas específicas (chamadas de plugins) para exibição de gráficos, validação de formulários, criação de controles HTML customizados, dentre muitos outros. Um destes plugins é o jQuery DataTables, especializado em exibição e manipulação de tables. O DataTables nos ajuda a ter o equilíbrio entre ter o controle do HTML sem perder produtividade no desenvolvimento, tratando-se de um plugin com suporte diversas funções para trabalho com tabelas, onde podemos destacar:

...

Quer ler esse conteúdo completo? Tenha acesso completo