jQuery Datatable: Configurando e utilizando o plugin em PHP

Veja neste artigo como configurar e utilizar o plugin jQuery Datatable em páginas web para estilização de tabelas.

O jQuery DataTable é mais um componente com inúmeras funcionalidades a oferecer para o desenvolvedor. Sua principal função é a organização de dados tabulados, ou seja, os dados que geralmente você mostra em forma de tabelas (com colunas e linhas).

Ao se desenvolver um sistema, a principal preocupação do projetista deveria ser apenas com a regra de negócio do mesmo, ou seja, com o que realmente o cliente precisa. O cliente não quer saber se você usa Datatable ou qualquer outro “plugin”, ele quer o projeto funcional e eficiente. Por esse motivo, mais e mais “plugins” e frameworks são desenvolvidos diariamente para tentar abstrair o máximo possível essa tarefa do projetista.

Configurando o Datatable

Na Figura 1 temos uma listagem simples de usuários, desenvolvida com Datatable. Perceba que ela é intuitiva, bonita e eficaz, e o melhor de tudo é que não precisamos nos preocupar com isso, o “plugin” se encarrega da maior parte, abstraindo essa tarefa do projetista.


Figura 1: Listagem de dados com Datatable

No final deste artigo você encontrará o link para download do Datatable em sua página oficial.

Para seguir as “melhores práticas” vamos criar uma nova página chamada “main.js” e inserir o código jQuery necessário para a inicialização do Datatable.

Listagem 1: Inicialização do Datatable no main.js

//Todos scripts dentro de Document.Ready são Jquery $(document).ready(function() { $('#consultar_usuarios').dataTable({ "bJQueryUI": true, "sPaginationType": "full_numbers", "sDom": '<"H"Tlfr>t<"F"ip>', "oTableTools": { "sSwfPath": "../../js/DataTables-1.9.4/extras/TableTools/media/swf/ copy_csv_xls_pdf.swf", "aButtons": [ { "sExtends": "xls", "sButtonText": "Exportar para Excel", "sTitle": "Usuarios", "mColumns": [0, 1, 2, 3] }, { "sExtends": "pdf", "sButtonText": "Exportar para PDF", "sTitle": "Usuarios, "sPdfOrientation": "landscape", "mColumns": [0, 1, 2, 3] } ] }, "oLanguage": { "sLengthMenu": "Mostrar _MENU_ registros por página", "sZeroRecords": "Nenhum registro encontrado", "sInfo": "Mostrando _START_ / _END_ de _TOTAL_ registro(s)", "sInfoEmpty": "Mostrando 0 / 0 de 0 registros", "sInfoFiltered": "(filtrado de _MAX_ registros)", "sSearch": "Pesquisar: ", "oPaginate": { "sFirst": "Início", "sPrevious": "Anterior", "sNext": "Próximo", "sLast": "Último" } }, "aaSorting": [[0, 'desc']], "aoColumnDefs": [ {"sType": "num-html", "aTargets": [0]} ] }); });//fim jquery

Não vamos nos atentar aos detalhes do código, pois o objetivo não é se aprofundar no Datatable neste artigo, você tem muitas (muitas mesmo) opções para personalizar este “plugin”, basta saber um pouco de inglês e claro ter paciência e destreza para muito JavaScript.

Enfim, vamos resumir a funcionalidades demonstradas acima para que você tenha uma ideia de como começar:

Como você deve ter percebido, definimos um seletor “#consultar_usuarios”, ou seja, o Datatable será configurado automaticamente em qualquer elemento que tenha um ID consultar_usuarios, abaixo mostramos essa tabela.

Listagem 2: Tabela Usuario

<!--INICIO consultar_usuario.php--> <?php require_once "../entity/usuario/controller_usuario.php"; $list = ControllerUsuario::getInstance()->BuscarTodos(); ?> <div id="tabs"> <ul><li><a href="#tabs-1">Lista de Usuarios</a></li></ul> <div id="tabs-1"> <input type="button" name="novo" value="Novo" onclick="location.href = 'index.php?pg=usuario/cad_usuario&acao=inserir'" /><br /><br /> <table class="display" id="consultar_usuarios"> <thead> <tr> <th>Nome</th> <th>E-mail</th> <th>Perfil</th> <th>Ativo</th> <th></th> </tr> </thead> <tbody> <?php foreach ($list as $l) { $cod = $l->getCod_usuario(); $email = $l->getEmail(); $nome = $l->getNome(); $ativo = $l->getAtivo(); $perfil = $l->getPerfil()->getNome(); $cod_perfil = $l->getPerfil()->getCod_perfil(); $linkDelete = "index.php?pg=usuario/deletarUsuario&cod_usuario=$cod"; $linkEdit = "index.php?pg=usuario/cad_usuario&cod_usuario=$cod&acao=editar"; echo "<tr class='gradeA'>"; echo "<td><center>$nome</center></td>"; echo "<td><center>$email</center></td>"; echo "<td><center><a href='index.php?pg=perfil/cad_perfil&cod_perfil=$cod_perfil&acao= editar' title='Clique para editar' target='_blank'>$perfil</a></center></td>"; if ($ativo == 's') echo "<td><center><font style='color:green';>Sim</font></center></td>"; else if ($ativo == 'n') echo "<td><center><font style='color:red';>Não</font></center></td>"; echo "<td><center> <img style='cursor:pointer;' src='../../css/imagens/editar.png' alt='Editar' width='24' height='24' onclick='location.href=\"$linkEdit\"' /> <img style='cursor:pointer;' src='../../css/imagens/remover.png' alt='Remover' width='24' height='24' onclick='dialogoConfirm(\"Deletar\",\"Deseja Deletar ?\",\"$linkDelete\");' /> </td>"; echo "</tr>"; } ?> </tbody> </table> </div><!-- div tabs-1 --> </div><!-- div tabs --> <!--FIM consultar_usuario.php-->

O HTML mostrado acima tem diversos recursos, desde simples HTML até PHP, você pode até utilizá-lo para estudar melhor como dinamizar seu conteúdo. Mas o que nos interessa saber é que temos uma tag TABLE com o ID consultar_usuarios. Você tem que obrigatoriamente definir as tags THEAD e TBODY, isso porque elas vão definir o cabeçalho (titulo das colunas) e conteúdo das mesmas. Sse você tentar colocar uma coluna a mais na tag TBODY que não tenha na THEAD você receberá um erro do Datatable. A partir de agora esta Table é controlada pelo Datatable, sua única função será passar o conteúdo e deixar que o Datatable faça seu trabalho.

Conclusão

Abstração é o foco, isso mesmo. Com o crescente mercado e a necessidade diária de inovação, ninguém tem mais tempo para se preocupar em ficar recriando a roda, a solução é utilizar tecnologia pronta e de qualidade e se focar nas regras de negócio. Tenha isso em mente e irá longe.

O Datatable é uma ferramenta muito poderosa, que se utilizada e estudada a fundo pode surpreender e inovar, não é a toa que grandes aplicações a utilizam.

Links

Artigos relacionados