Ordenar tabelas com o plugin TableSorter

14 de fevereiro de 2010

Olá para todos, neste artigo irei demonstrar como ordenar uma tabela de maneira muito fácil utilizando o plugin TableSorter com o framework Jquery.  O que faz com que esta ordenação de dados em uma tabela seja fácil é a total abstração que o Tablesorter nos proporciona, em outras palavas, não precisamos entender como nada funciona, apenas passamos o identificador para o plugin e ele faz toda a mágica.

Vamos ao que realmente interessa, para este exemplo vamos precisar do plugin Tablesorter que se encontra aqui: http://tablesorter.com/docs/ , e logicamente a última versão de preferência do framework Jquery que você pode baixar por aqui:  http://jquery.com/ .

Após o download destes arquivos coloque-os na pasta “js” da pasta do seu site, prefiro assim para poder organizar melhor os arquivos da aplicação 🙂 . Agora com os arquivos em seu devido lugar vamos criar a nossa página em HTML com a tabela que iremos ordenar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Tabela</title>
</head>
<body>
	<table id="myTable">
		<thead>
		<tr>
			<th>Last Name</th>
			<th>First Name</th>
			<th>Email</th>
			<th>Due</th>
			<th>Web Site</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td>Smith</td>
			<td>John</td>
			<td>jsmith@gmail.com</td>
			<td>$50.00</td>
			<td>http://www.jsmith.com</td>
		</tr>
		<tr>
			<td>Bach</td>
			<td>Frank</td>
			<td>fbach@yahoo.com</td>
			<td>$50.00</td>
			<td>http://www.frank.com</td>
		</tr>
		</tbody>
	</table>
</body>
</html>

E entre as tags “<head>” vamos carregar os nossos scripts e colocar o código para executar a ordenação.

<script type="text/javascript" src="js/jquery-latest.js"></script>
	<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#myTable").tablesorter();
		});
	</script>

Portanto com estes pequenos scripts criamos nossa tabela dinamicamente ordenada. Confirmando minha afirmação de que seria fácil, terminamos este artigo. Deixem seus comentários abaixo.

Anúncios