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.