Usando o TableSorter com CakePHP

28 julho 2008

Usando o TableSorter com CakePHP

Arquivado em: CakePHP, Tutoriais — Tags:jquery, ordernar, plugin, sorter, tabela, table, tablesorter, vendor — Juan Basso @ 9:26 pm

Pessoal, depois de um tempo sumido devido a alguns trabalhos que me consumiram muito tempo, estou voltando…

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:

^?View Code PHP

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

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

^?View Code PHP

<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:

^?View Code PHP

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

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

^?View Code PHP

<?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.

Comentários (7)

7 Comentários »

[...] de escrever sobre como usar o TableSorter com CakePHP, vou escrever agora sobre o FlexiGrid. Mostrar como implementar o exemplo mais sofisticado que eles [...]

Pingback por CakePHP Brasil » Usando FlexiGrid com CakePHP — 30 julho 2008 @ 1:37 pm
Cara, você me salvou com seu tutorial. Esse tipo de feature é uma mão na roda para aplicações!
Abraço,
Rod

Comentário por Rod — 17 setembro 2008 @ 2:06 pm
The author uvazhuha for literacy)))

Comentário por Protonix — 2 outubro 2008 @ 5:41 pm
In the article a huge thank you all for the cause, a lot of people are using

Comentário por Vasilisa — 6 novembro 2008 @ 12:56 am
Interestingly was, but there is someone who does not quite agree with the author?

Comentário por Gala — 7 novembro 2008 @ 12:36 am
Grande Juan,

to usando facilmente o tablesorter com o cakephp, mas to me batendo aqui pra “sincronizar” a ordenação do tbsorter com a ordenação do cake. Sabes se é possível isso?

Abraço

Comentário por Mateus — 15 maio 2009 @ 5:06 am

É possível sim. Eu utilizo em um dos meus sistemas. Você deve colocar alguns parâmetros no seu flexigrid, por exemplo:

^?View Code PHP

$('#flex1').flexigrid({
	url: '" . $html->url(array('controller' => 'imoveis', 'action' => 'listar', 'true'), true) . "',
	dataType: 'json',
	colModel: [
		{display: '', name: 'ver', width: 20, sortable: false, align: 'center'},
		{display: '" . __('Ref', true) . "', name: 'Building.referencia', width: 25, sortable: true, align: 'center'},
		{display: '" . __('Fotos', true) . "', name: 'Building.photo_count', width: 25, sortable: true, align: 'center', hide: true},
		{display: '" . __('Tipo', true) . "', name: 'TypeBuilding.descricao', width: 40, sortable: true, align: 'center'},
		{display: '" . __('Negociação', true) . "', name: 'Building.negociacao', width: 55, sortable: true, align: 'center'},
		{display: '" . __('Cidade', true) . "', name: 'City.nome', width: 75, sortable: true, align: 'center'},
		{display: '" . __('Valor', true) . "', name: 'Building.valor', width: 70, sortable: true, align: 'right'}
	],
	buttons: [
		{name: '" . __('Comparar imóveis selecionados', true) . "', bclass: 'compare', onpress: Comparar},
		{separator: true}
	],
	sortname: 'Building.valor',
	sortorder: 'asc',
	usepager: true,
	title: 'Imóveis',
	width: 460,
	height: jQuery.browser.msie ? 290 : 305,
	useRp: false,
	rp: 10,
	pagestat: '" . __('Mostrando {from} até {to} de {total} imóveis', true) . "',
	procmsg: '" . __('Processando, aguarde...', true) . "',
	nomsg: '" . __('Nenhum imóvel encontrado', true) . "'
});

Feito isso, você deve tratar algumas coisas no seu controller, eu faço da seguinte maneira:

^?View Code PHP

	function _flexigrid() {
		$this->RequestHandler->respondAs('json');
		$this->layout = 'ajax';
		$this->viewPath .= '/json';
 
		/*
		 * No extract, vem as variáveis:
		 * - rp: Itens por página
		 * - page: Página atual
		 * - sortname: Campo para ordenar
		 * - sortorder: Tipo de ordenação (asc ou desc)
		 * - query: Conteúdo de pesquisa (opcional)
		 * - qtype: Campo do query (opcional)
		 */
		$vars = array('sortname' => 'valor', 'rp' => 0, 'page' => 1, 'sortorder' => 'ASC', 'query' => '', 'qtype' => '');
		extract(array_merge($vars, $this->params['form']));
		$params = array(
			'limit' => $rp,
			'page' => $page,
			'order' => array(
				$sortname => $sortorder
			)
		);
		if (isset($query) && !empty($query)) {
			$params['conditions'][$qtype . ' LIKE'] = '%' . $query . '%';
		}
		return $params;
	}
 
 
		if ($ajax) {
			$params = $this->_flexigrid();
 
			$this->Building->unbindModel(array('hasMany' => array('Photo')));
			$imoveis = $this->Building->find('all', $params);
			foreach ($imoveis as $id => $imovel) {
				$imoveis[$id]['Param'] = Set::combine($imovel['Param'], '{n}.id', '{n}.BuildingsParam.valor');
			}
			$total = $this->Building->find('count_validos');
			$page = $params['page'];
			$params = $this->Building->Param->find('list', array('order' => 'descricao'));
			$this->set(compact('imoveis', 'total', 'page', 'params'));
			return;
		}
		$this->pageTitle = __('Imóveis: Listando', true);
		$this->set('params', $this->Building->Param->find('list', array('order' => 'descricao')));
	}

Conseguiu entender? Qualquer coisa, só mandar a dúvida… Abraços e desculpa pela demora.

Comentário por Juan Basso — 17 maio 2009 @ 6:05 pm

Feed RSS dos comentários deste post URL de TrackBack

CakePHP Brasil

28 julho 2008

Usando o TableSorter com CakePHP

7 Comentários »

Deixe um comentário