Problème JQuery : tableau html

Sujet résolu

15 janvier 2011 à 14:29:31

Bonjour,

Voilà j'ai un problème avec JQuery que j'utilise depuis hier ^^.
Voici mon problème :
je dois trier un tableau html en javascript. Pour cela, j'ai utilisé tablesorter de JQuery et tout va bien. Je peux trier mon tableau par colonne!
Le problème c'est que je dois également sur ce tableau colorer 1 ligne sur 2.
J'ai trouvé une solution en utilisant un .addClass sur mes lignes mais il y a un soucis :
Je peux trier la première colonne sans problème (donc par ordre croissant ou décroissant) mais pour toutes les autres colonnes les couleurs cafouilles. (Ex: la première d'une couleur, les 2 suivantes d'une autre etc..)
Je voulais donc savoir s'il était possible d'avoir une ligne sur 2 colorées peu importe les colonnes.

Voici mon code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-200000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="language" content="en" />
	<script type="text/javascript" src=".\jquery.tablesorter\jquery-latest.js"></script> 
	<script type="text/javascript" src=".\jquery.tablesorter\jquery.tablesorter.js"></script> 
	<link rel="stylesheet" href=".\jquery.tablesorter\themes\perso\style.css" type="text/css" media="all" />
</head>

<body>
	<table class="tablesorter" id="monTableau">
		<thead>
			<tr>
				<th>Name</th><th>Salary</th><th>Extension</th><th>Start date</th><th>Start date (American)</th>
			</tr>
		</thead>
		
		<tbody>
			<tr>
				<td>Bloggs, Fred</td><td>$12000.00 </td><td>1353</td><td>2011-01-05 10:53:00</td><td>01/02/2002</td>
			</tr>

			<tr>
				<td>Turvey, Kevin</td><td>$191200.00 </td><td>2342</td><td>2010-12-27 05:32:01</td><td>05/02/1979</td>
			</tr>
			
			<tr>
				<td>Mbogo, Arnold</td><td>$32010.12 </td><td>2755</td><td>2010-12-28 04:55:05</td><td>08/09/1998</td>
			</tr>

			<tr>
				<td>Shakespeare, Bill</td><td>$122000.00 </td><td>3211</td><td>2010-12-17 02:24:07</td><td>11/12/1961</td>
			</tr>
			
			<tr>
				<td>Shakespeare, Hamnet</td><td>$9000 </td><td>9005</td><td>2010-12-16 03:12:11</td><td>01/01/2002</td>
			</tr>

			<tr>
				<td>Fitz, Marvin</td><td>$3300 </td><td>5554</td><td>2011-01-11 10:40:08</td><td>05/22/1995</td>
			</tr>
		</tbody>
	</table>
	<script>
		$(document).ready(function() 
			{ 
				$('table.tablesorter tbody tr:nth-child(even)').addClass('ligne1');
				$('table.tablesorter tbody tr:nth-child(odd)').addClass('ligne2');	
			} 
		); 
		$(document).ready(function() 
			{ 
				$("#monTableau").tablesorter(); 
							
			} 
		); 
	</script>
	
</body>

</html>

J'espère avoir été clair ^^'.
Merci d'avance pour votre aide.

Golmote

15 janvier 2011 à 15:01:22

Il va falloir recolorer ton tableau après chaque tri...

$(document).ready(function () {
    $('table.tablesorter tbody tr:nth-child(even)').addClass('ligne1');
    $('table.tablesorter tbody tr:nth-child(odd)').addClass('ligne2');
});
$(document).ready(function () {
    $("#monTableau").tablesorter().bind('sortEnd', function () {
        $(this).find('tbody tr:nth-child(even)').removeClass('ligne1 ligne2').addClass('ligne1');
        $(this).find('tbody tr:nth-child(odd)').removeClass('ligne1 ligne2').addClass('ligne2');
    });

});

K3m3T

15 janvier 2011 à 16:37:00

Merci Golmote c'est exactement ce que je voulais

Je me doutais qu'il fallait le faire pour chaque tri mais je ne voyais pas comment faire...

Une dernière question un peu hors sujet :

Je peux utiliser ce morceau de JavaScript avec un tableau généré en PHP?

Golmote

15 janvier 2011 à 16:47:19

Si ton PHP génère un tableau similaire à celui posté dans ce topic, je ne vois pas où pourrait se situer le problème.

Pense à mettre ton sujet en résolu à l'aide du bouton approprié