Hoje vou falar de uma experiência que tive com o TableSorter com CakePHP na construção de uma página, não me atendo muito a detalhes de design, mas da parte funcional. No grupos de CakePHP PT eu tinha falado que ia fazer, mas fazem quase dois meses e nada, porém agora lá vai… Bill: desculpe a demora.

Primeiro, baixem o jQuery (http://jquery.com) e o plugin TableSorter (http://tablesorter.com).

Extraia os arquivos baixados (jquery.js e jquery.tablesorter.js) em alguma vendors\js ou webroot\js. Eu particularmente prefiro deixar na pasta vendors, pois são plugins de terceiros ou que não são exclusivos da aplicação. Em contra partida, deixar na pasta webroot polpa o trabalho do servidor executar o cake para procurar, reduzindo o tempo de resposta. Aí vai do gosto de cada um. Eu prefiro perder tempo para deixar as coisas nos seus devidos lugares…

No controller, você precisa apenas declarar que vai usar o helper Javascript:

1

var $helpers = array(..., 'Javascript');

Feito isso, criamos uma tabela na view do que queremos mostar:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<table border="0" id="detalhe_compra">
	<caption><?php __('Detalhe por compra'); ?></caption>
	<thead>
		<tr>
			<th><?php __('Pedido'); ?></th>
			<th><?php __('Data'); ?></th>
			<th><?php __('Cliente'); ?></th>
			<th><?php __('Valor'); ?></th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td colspan="3">&nbsp;</td>
			<td><?php echo $number->currency($totalPedidos); ?>
		</tr>
	</tfoot>
	<tbody>
<?php foreach ($pedidos as $pedido): ?>
		<tr>
			<td><?php echo $pedido['Pedido']['numero']; ?></td>
			<td><?php echo $pedido['Pedido']['data']; ?></td>
			<td><?php echo $pedido['Cliente']['nome']; ?></td>
			<td><?php echo $pedido['Pedido']['valor']; ?></td>
		</tr>
<?php endforeach; ?>
	</tbody>
</table>

Depois, ainda na mesma view, basta colocar o seguinte código para carregar os arquivos de javascript no head:

1

<?php $javascript->link(array('jquery', 'jquery.tablesorter'), false); ?>

Em seguida, configurar o TableSorter para agir sobre a tabela:

1
2
3
4
5
6

<?php
$javascript->codeBlock('
	$(document).ready(function(){
		$("#detalhe_compra").tablesorter({decimal: ",", dateFormat: "uk"});
	});', array('inline' => false));
?>

Nas configurações da tabela, defini que os números possuem o vírgula como separador decimal e a data no formato inglês (similar ao nosso).

Pronto, só isso já faz funcionar o TableSorter. Outras configurações, podem olhar no site do TableSorter e ver. Lá é bem documentado e tranquilo.

Abraços e boa sorte a todos, qualquer coisa, é só comentar.