jQuery Datatable: Configurando e utilizando o plugin em PHP

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:

• bJQueryUI: Identifica que o plugin deve utilizar o tema padrão do seu jQuery, ou seja, o seu jQuery UI configurado.
• sPaginationType: Identifica que devem ser mostrados os números de paginação.
• sDom: Este é configurado a partir de itens padrões do plugin, como o H, T e assim por diante. Através dessas letras (que identificam componentes do plugin) você pode dizer onde exatamente ele vai ficar quando for mostrado (em cima, em baixo, do lado esquerdo, direito).
• oTableTools: Esta opção é mais um “plugin do plugin”, foi uma funcionalidade extra instalada juntamente com o Datatable para acrescentar mais funcionalidades. O oTableTools neste caso adiciona botões de extração para PDF e Excel, ou seja, o usuário poderá a qualquer hora extrair todo o conteúdo da tela.
• oLanguage: Aqui você poderá alterar a descrição padrão dos itens do Datable e colocar o que bem desejar, ou seja, onde estava escrito “Search” você pode colocar “Pesquisar” ou “Procure aqui” ou qualquer outra expressão que desejar.
• aaSorting: Descreve como será ordenada a tabela. No caso acima, configuramos a coluna 0 (primeira coluna) para ser ordenada de forma decrescente (desc), ou seja, se a primeira coluna for numérica ele irá numerar da seguinte forma: 10, 9, 8, 7...
• aoColumnDefs: Aqui você pode definir detalhadamente o que cada coluna tem ou como ela será, as definições acima são para dizer que a coluna 0 (primeira coluna é do tipo num-html, ou seja, possui apenas números.

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

• jQuery Datatabe