Pois é, depois de muito … mas muito tempo volto a escrever alguma coisa aqui. Manter um blog requer tempo ! Mas … enfim … vamos levando na medida do possível.
Estive pesquisando formas de fazer ordenação de colunas na tabela, minha idéia era utilizar javascript para fazer o negócio bem dinâmico e que deixasse o servidor livre, nada de Ajax, fazer uma coisa simples mesmo. Então fiz uns testes com a biblioteca JQuery.
JQuery é uma biblioteca javascript que possui diversas funções e efeitos visuais para tornar nossas interfaces mais “rica”. Além de ser uma biblioteca pequena e as funções javascripts são compatível com diversos tipos de browsers.
Para ordenar os dados de uma tabela com JQuery utilizei o plugin TableSorter. Ele faz a ordenação de dados de uma tabela via javascript e é muito simples de usar.
Para iniciar o uso, basta adicionar os .js ao seu projeto.
<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>
Na sua tabela vc vai adicionar as tags <THEAD> e <TBODY>
<table id="idDaTabela">
<thead>
<tr>
<th>Nome</th>
<th>Endereço</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>João</td>
<td>R. um casa 5</td>
<td>joao@gmail.com</td>
</tr>
<tr>
<td>Marcos</td>
<td>Av. 7 de setembro, 258</td>
<td>marcos@yahoo.com</td>
</tr>
<tr>
<td>Carla</td>
<td>R. quatro, 50</td>
<td>carla@hotmail.com</td>
</tr>
</tbody>
</table>
Note que a celulas dos cabeçalho da tabela tem que está entre as tags <TH>. Se vc utilizar <TD> ele não reconhece como cabeçalho da tabela mesmo estando entre as tagas <THEAD>.
Pode ser bloqueada a ordenação de uma ou mais colunas da tabela. Para isso faça:
<th ... class="{sorter: false}>
Para chamar utilizar a API :
< script>
$(document).ready(function() {
$("#idDaTabela")
.tablesorter( {sortList: [[0,0], [1,0]]} )
} );
</script>
No script acima, estou chamado a plugin tablesorter e ordenando a coluna 0 e 1 de forma ascesdente. Assim toda vez que a pagina for carregada já trás as colunas 0 e 1 da tabela ordenadas.
Para melhorar a vizualização da ordenação pode ser configurado CSS.
th.header {
background-image:url(../img/green_arrows.gif);
font-weight: bold;
background-repeat: no-repeat;
background-position: center left;
padding-left: 20px;
border-right: 1px solid #dad9c7;
margin-left: -1px;
background-color: #D1E6ED;
....
}
Configura o head da tabela, observe que tem uma imagem que serve para informa ao usuário qual ordenaçao deseja fazer.
th.headerSortUp {
background-image:url(../img/green_acending.gif);
background-color: #B0C4DE;
}
th.headerSortDown {
background-image:url(../img/green_decending.gif);
background-color: #B0C4DE;
}
Na pagina os plugin tablesorter tem mais exemplos e uma documentação bem legal.
Ahhh o JQuery tbm tem um plugin para paginação jquery.tablesorter.pager.js.
Mas para esse post vou encerrando por aqui.
Att.
Referências
bah cana!