quarta-feira, 7 de outubro de 2009

DataTables: Plugin JQuery para tabelas "Fácil"

Gostei muito deste plugin do JQuery, pois transforma uma simples tabela em uma tabela cheia de recursos.

Ingredientes:
-JQuery
-Plugin DataTables do JQuery

Como fazer:
Para organizar crie uma pasta chamada includes, adicione o arquivo jquery.js e coloque a pasta media descompactada do pacote do Plugin DataTables.

No seu arquivo index.html coloque:

-CSS do Plugin DataTables

<style type="text/css" title="currentStyle">
@import "includes/media/css/demo_page.css";
@import "includes/media/css/demo_table.css";
</style>



-Cabeçalho JQuery

<script type="text/javascript" language="javascript"
src="includes/jquery.js"></script>



-Cabeçalho Plugin DataTables

<script type="text/javascript" language="javascript"
src="includes/media/js/jquery.dataTables.js"></script>



-Inicialização da tabela

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var tabela = $('#tabelaTeste').dataTable();
} );
</script>



-Crie uma tabela com o mesmo id da inicialização, essa tabela precisa ter algumas tags html para mostrar o conteúdo corretamente:


<table id="tabPerfil" class="display">
<thead>
<tr>
<th>Nome</th>
<th>Local</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fulano</td>
<td>Valhalla, Av. 5</td>
<td>03/09/1934</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Nome</th>
<th>Local</th>
<th>Data</th>
</tr>
</tfoot>
</table>



- thead para mostrar o Cabeçalho, com uma linha(tr) e as colunas(th)
- tboby é o conteúdo da tabela, com uma linha(tr) e as colunas(th), terá que ter o mesma quantia de colunas definido no thead
- tfoot (opcional) mesmo esquema do thead mas fica no rodapé

Coloquei o conteúdo deste tutorial neste arquivo anexo.

Vantagens do Plugin DataTables:
- Campo de busca para filtrar conteúdo;
- Ordenar campos com um clique;
- Paginação;
- Selecione a quantidade de linhas que aparecerá;
- Internacionalização

Veja mais no site do plugin DataTables.

4 comentários:

Herrera's-TI disse...

Parabéns pelo post...
Sei que já faz tempo que vc postou mas precisava de uma ajuda...
Imagina que tenho esta tabela, com ela posso fazer uma filtragem e apareceu somente alguns registros. (ou até mesmo com a tabela toda).
Agora queria clicar em um botão de impressão e em outra tela conseguir pegar estes campos que estão sendo exibidos na grid...tipo para fazer uma tela de impressão minha do meu jeito...
Sabe se tem como mandar estes campos para outra pagina? Se sim, poderia colocar um exemplo?

Obrigado!

Renê Dettenborn disse...

Faz um teste neste plugin
http://datatables.net/extras/tabletools/buttons

Herrera's-TI disse...

Renê, sabe como usar o DataTables server-side processing with POST?

Será que da para enviar os campos da tabela via POst???

Obrigado

Renê Dettenborn disse...

Sugiro que você dê uma olhada na área de exemplos, segue o exemplo usando POST:
http://www.datatables.net/release-datatables/examples/server_side/post.html