Olá, pessoal!
Pra “aquecer o motor” nesse primeiro post do blog, vamos falar um pouco sobre um plugin muito útil para jQuery, o DataTables.
O DataTables fornece controles avançados de interação para tabelas em HTML. Tudo com umas poucas (pouquíssimas MESMO) linhas de Javascript.
Algumas coisas que o DataTables faz por você (e muito bem):
Pra “aquecer o motor” nesse primeiro post do blog, vamos falar um pouco sobre um plugin muito útil para jQuery, o DataTables.
O DataTables fornece controles avançados de interação para tabelas em HTML. Tudo com umas poucas (pouquíssimas MESMO) linhas de Javascript.
Algumas coisas que o DataTables faz por você (e muito bem):
- Paginação de resultados
- Filtragem de dados na tabela
- Ordenação
Além disso, o framework é altamente flexível, e cada detalhe é altamente customizável.
O DataTables também dá suporte ao ThemeRoller, do jQuery UI. Com isso, você pode aplicar às suas tabelas quaisquer temas do ThemeRoller - desde os “pré-fabricados” até os customizados, construídos por você. O que vai poupar um bocado do tempo que você passaria escrevendo CSS.
O DataTables também dá suporte ao ThemeRoller, do jQuery UI. Com isso, você pode aplicar às suas tabelas quaisquer temas do ThemeRoller - desde os “pré-fabricados” até os customizados, construídos por você. O que vai poupar um bocado do tempo que você passaria escrevendo CSS.
Mão na massa
Chega de conversa. Nada mais explicativo que algumas linhas de código pra mostrar o poder e a versatilidade do DataTables.
Antes de mais nada, você vai precisar baixar a versão mais recente do plugin no site oficial do DataTables: http://datatables.net/download/
Agora, crie uma página simples (digamos... HelloDataTables.html), com o seguinte código:
<html>
Antes de mais nada, você vai precisar baixar a versão mais recente do plugin no site oficial do DataTables: http://datatables.net/download/
Agora, crie uma página simples (digamos... HelloDataTables.html), com o seguinte código:
<html>
<head>
<title>Hello DataTables</title>
</head>
<body>
<table id="tabela">
<thead>
<tr>
<th>Nome</th>
<th>Endereço</th>
<th>Telefone</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fulano da Silva</td>
<td>Rua do Fulano da Silva, 1234</td>
<td>(11) 1111-111</td>
<td>fulano@exemplo.com</td>
</tr>
<tr>
<td>Beltrano Oliveira</td>
<td>Rua do Beltrano, 4321</td>
<td>(22) 2222-2222</td>
<td>beltrano@exemplo.com</td>
</tr>
<tr>
<td>Ciclano de Tal</td>
<td>Rua do Ciclano, 100</td>
<td>(33)1234-5678</td>
<td>ciclano@exemplo.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Sua página deve ficar parecida com isso:
Voilá! Temos uma tabela com 3 linhas... 4 colunas... e nenhuma graça! Vamos incrementá-la um pouco usando o DataTables.
Primeiro, no final da página (entre as tags </body> e </html>) vamos referenciar os scripts do jQuery, jQuery UI e o DataTables:
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" language="javascript" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" language="javascript" type="text/javascript"></script>
<script src="jquery.dataTables.min.js" language="javascript" type="text/javascript"></script>
</html>
Certifique-se de copiar o arquivo jquery.dataTables.min.js para o mesmo diretório onde está o HelloDataTables.html. Este arquivo é parte do pacote que você baixou no site do DataTables. No arquivo compactado com o DataTables, ele se encontra no diretório media\js.
Logo após essas referências criaremos o seguinte script:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#tabela').dataTable();
});
</script>
Abaixo um screenshot de como vai ficar nossa página:
Perceba que temos um campo de filtro, e podemos controlar também quantos resultados queremos em cada página. Podemos ordenar os resultados clicando nos cabeçalhos de cada coluna.
Temos paginação, ordenação dinâmica dos resultados e filtro, e escrevemos apenas uma linha de Javascript, invocando o método dataTable() para nossa tabela!
Melhorando a aparência
Voilá outra vez! Agora temos como ordenar, filtrar e paginar nossa tabela. Que continua não tendo graça nenhuma. Então vamos partir pra outra funcionalidade do DataTables e aplicar um tema do ThemeRoller.
Vamos usar um tema pronto. Para isso, vá até http://jqueryui.com/themeroller/#themeGallery.
Na lista de temas que aparece do lado esquerdo da página, clique no botão “Download” de qualquer um deles. Em nosso exemplo, vamos usar o tema “UI Lightness”, mas você pode seguir o tutorial com qualquer um deles.
Vamos incluir a seguinte linha dentro do head da HelloDataTable.html para referenciar a folha de estilos customizada com o nosso tema:
<link href="jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
Este arquivo, jquery-ui-1.8.16.custom.css, está no arquivo compactado que você baixou com seu tema do ThemeRoller. Procure-o em \css\ui-lightness (troque "ui-lightess" pelo nome do seu tema, caso tenha baixado outro).
E vamos modificar a linha que cria nosso DataTable. Onde estava:
$('#tabela').dataTable();
Vai ficar:
$('#tabela').dataTable({
"bJQueryUI": true
});
Definir o parâmetro “bJQueryUI” para “true” instrui o DataTables a utilizar os temas do ThemeRoller.
Começa a ficar apresentável, mas ainda está estranho...
Vamos fazer alguns ajustes em nossa página. Primeiro, vamos criar um arquivo chamado exemplo.css, e vamos estilizar um pouco nossa página. O conteúdo do arquivo será o seguinte:
*
{
font-family: Sans-Serif;
font-size: 10pt;
}
body
{
margin: 20px 0 0 0;
padding: 0;
text-align: center;
}
#wrapper
{
width: 700px;
margin: 0px auto;
text-align: left;
padding: 5px;
}
#tabela
{
width: 700px;
}
E vamos incluir uma referência a nosso arquivo CSS no cabeçalho da página, logo abaixo da referência à folha de estilos do nosso tema.
<link href="exemplo.css" rel="stylesheet" type="text/css" />
Finalmente, vamos envolver todo o conteúdo da página com um <div>.
<div id="wrapper">
… conteúdo da página ...
</div>
Agora, nossa página tem a seguinte aparência:
Abaixo, todo o código-fonte da página até agora:
<html>
<head>
<title>Hello DataTables</title>
<link href="jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="exemplo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<table id="tabela">
<thead>
<tr>
<th>Nome</th>
<th>Endereço</th>
<th>Telefone</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fulano da Silva</td>
<td>Rua do Fulano da Silva, 1234</td>
<td>(11) 1111-111</td>
<td>fulano@exemplo.com</td>
</tr>
<tr>
<td>Beltrano Oliveira</td>
<td>Rua do Beltrano, 4321</td>
<td>(22) 2222-2222</td>
<td>beltrano@exemplo.com</td>
</tr>
<tr>
<td>Ciclano de Tal</td>
<td>Rua do Ciclano, 100</td>
<td>(33)1234-5678</td>
<td>ciclano@exemplo.com</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" language="javascript" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" language="javascript" type="text/javascript"></script>
<script src="jquery.dataTables.min.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#tabela').dataTable({
"bJQueryUI": true
});
});
</script>
</html>
Algumas melhorias a mais...
Além do parâmetro “bJQueryUI” que usamos antes, o DataTables expõe uma infinidade de outros parâmetros que podemos utilizar para modificar a aparência e o comportamento de nossas tabelas.
Abaixo, vamos usar alguns deles para completar nosso exemplo.
Podemos controlar a forma como o DataTables paginará nossas tabelas. Alguns parâmetros importantes nessa configuração são:
- bLengthChange: Define se o usuário pode alterar a quantidade de registros exibidos por página. Vamos usar “false” em nosso exemplo;
- bfilter: Define se os resultados podem ser filtrados. Vamos deixar os filtros habilitados em nosso exemplo;
- iDisplayLength: Define a quantidade de registros exibidos por página. Vamos usar “10” em nosso exemplo;
Você provavelmente notou um problema com nossa tabela... Todas as mensagens estão em inglês! O DataTables expõe várias propriedades para internacionalização, de modo que possamos customizar ou traduzir essas mensagens conforme a nossa necessidade.
Vamos a algumas dessas propriedades:
- oLanguage.sSearch: Define o label do campo de busca (filtro) da tabela. Vamos usar “Pesquisar” em nosso exemplo.
- oLanguage.sInfo : Mostra quantos resultados estão sendo exibidos na tabela.
- oLanguage.sEmptyTable : Mensagem que será mostrada se a tabela não tiver registros.
- oLanguage.sInfoFiltered: Mensagem que notifica que os resultados da tabela foram filtrados. Vamos deixar em branco em nosso exemplo.
Portanto, o construtor de nossa tabela ficará assim:
$('#tabela').dataTable({
"bJQueryUI": true,
"bLengthChange" : false,
"iDisplayLength" : 10,
"oLanguage": {
"sInfo": "Mostrando registros de _START_ a _END_ de um total de _TOTAL",
"sInfoEmpty": "Nenhum registro para exibir",
"sSearch" : "Pesquisar",
"sInfoFiltered" : ""
}
});
Agora, nossa página deve ter a seguinte aparência:
Para saber mais...
Esta é apenas uma pequena amostra das capacidades do DataTables. Você pode fazer muito mais com este plugin.
A documentação do DataTables é bem completa, e vale a pena gastar algum tempo vendo as propriedades e eventos disponíveis, e testando alguns deles para incrementar nosso exemplo.
Até a próxima!
