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.


Criando tabelas zebradas com JQuery

10 de outubro de 2009

Olá leitores, hoje vou mostrar como como criar uma tabela zebrada com JQuery, a utilização deste framework para esta atividade é muito simples assim como a realização de tudo com JQuery. A única exigência para a aula de hoje é conhecer um pouco de HTML e CSS.

Para colocar o framework na sua página primeiro você precisa baixá-lo caso não o possua, no site você poderá fazer o download e descompactá-lo na sua pasta onde estiver o seu site.

O código para colocá-lo em sua página é este:

<script src=”js/jquery.js” type=”text/javascript”></script>

Abaixo está o código que devemos colocar para que as tabelas fiquem zebradas.

<script type=”text/javascript”>

$(document).ready(function() {

$(‘tr:nth-child(even)’).addClass(‘alt’);

$(‘td:contains(Henry)’).parent().find(‘td:eq(1)’)

.addClass(‘highlight’).end().find(‘td:eq(2)’).addClass(‘highlight’);

});

</script>

Esta é nossa página HTML que usaremos para testar a execução do código Java script.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>licao 3</title>

<script src=”js/jquery.js” type=”text/javascript”></script>

<style type=”text/css”>

tr {

background-color: #fff;

}

.alt {

background-color: #ccc;

}

.highlight {font-weight:bold; font-style: italic;}

.cor{

background-color: #FF0000;

}

</style>

<script language=”javascript”>

$(document).ready(function() {

$(‘tr:nth-child(even)’).addClass(‘alt’);

$(‘td:contains(Henry)’).parent().find(‘td:eq(1)’)

.addClass(‘highlight’).end().find(‘td:eq(2)’).addClass(‘highlight’);

});

</script>

</head>

<body>

<table>

<tr>

<td>As You Like It</td>

<td>Comedy</td>

<td></td>

</tr>

<tr>

<td>All’s Well that Ends Well</td>

<td>Comedy</td>

<td>1601</td>

</tr>

<tr>

<td>Hamlet</td>

<td>Tragedy</td>

<td>1604</td>

</tr>

<tr>

<td>Macbeth</td>

<td>Tragedy</td>

<td>1606</td>

</tr>

</table>

</body>

</html>

Explicando o código JQuery, na primeira linha dizemos que o código só deve ser rodado depois que a página for totalmente carregada.

$(document).ready(function() {

Depois na segunda linha está a mágica dizemos com o comando $(‘tr:nth-child(even)’) que as linhas da tabela devem a cada 1 linha mudar a cor para a definida na classe ‘alt’ pelo comando css, assim mudamos a cor de fundo da linha.

$(‘tr:nth-child(even)’).addClass(‘alt’);

Pronto, terminamos nossa tabela zebrada, dúvidas deixem um comentário que explico com prazer.

Até mais.