Olá desenvolvedores, neste tutorial falaremos sobre o DataTables jQuery, um plug-in para a biblioteca jQuery do Javascript. Trata-se de uma ferramenta que adiciona recursos avançados a qualquer tabela HTML. Recursos de paginação, busca instantânea, ordenação de colunas, entre outras funcionalidades.

Como o foco principal do desenvolvedor deveria estar inteiramente voltado para a regra de negócio, a cada dia mais plugins e frameworks têm sido concebidos a partir desta ideia. A ideia de conceder ao desenvolvedor maior poder de abstração de forma que ele possa cada vez mais se concentrar na regra de negócio.

É neste contexto de utilização que se insere o DataTables que é utilizado por grandes aplicações. Assim, poder, abstração e o foco são as palavras que circundam esta biblioteca. Então, sem mais delongas vamos entender como ele funciona.

Dessa forma, seguindo o padrão de implementação da aplicação que contempla diversas funcionalidades que estamos desenvolvendo, criaremos na página principal um link para uma página que implementará o DataTables.

E claro, precisamos agora criar uma página JSP para receber a nossa implementação. Na subpasta pages crie a página datatable.jsp.

DECLARANDO AS BIBLIOTECAS

Tendo criado a página, dentro da tag head declare a biblioteca, ou seja, inclua os arquivos de CSS, Javascript e jQuery respectivamente. Você pode obtê-los na página oficial clicando aqui. Ou pode copiar a declaração no exemplo abaixo.

TABELA E FUNÇÃO JABASCRIPT

Copie neste link o exemplo de código HTML disponibilizado, ou pode ainda implementar uma tabela simplificada como o código abaixo. E se você é aluno do curso de Formação Java Web, poderá obter o arquivo para download logo abaixo da aula.

E após o fechamento da tag body, escreva uma função Javascript para atribuir algumas funcionalidades a tabela.

EM POUCAS PALAVRAS

E se você subir a aplicação agora verá que os dados ainda estão estáticos. Neste primeiro momento o objetivo é apresentar a você este poderoso recurso do Javascript, declarar as bibliotecas e testar se estão funcionando corretamente. No próximo tutorial a rotina que implementaremos buscará os dados do banco de dados. Eu fico por aqui e nos vemos no próximo tutorial.