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!
Ótimo tutorial, linguagem bem didática, parabéns.
ResponderExcluirMuito bom mesmo. Me ajudou muito.
ResponderExcluirSó preciso de uma coisa:
A minha tabela é gerada dinamicamente. Eu gostaria de dividila em 3 colunas.
Sabe se há alguma configuração a fazer, para que no momento em que o Data Table ajusta a tabela, ele já divide em 3 colunas?
Parabéns cara ótimo tutorial.
ResponderExcluirPreciso colocar um linkButton
ResponderExcluirSabe fazer isso.
Parabéns pelas dicas.
Muito legal! Parabéns pelo post!
ResponderExcluirVocê sabe se existe uma forma de passar entre as paginas da tabela de forma automatica em intervalos de tempo?
Obrigado pelo comentário!
ExcluirAcho que a forma mais direta de fazer isso é usar a função setTimeout do javascript. Ela cria um timer que vai executar uma certa função a cada intervalo de tempo. Dê uma pesquisada sobre essa função, existe bastante material disponível e ela é bem simples de usar!