Tri de tableau html, script orienté objet

Télécharger le projet
Commenter

Description

Ce script est une adaptation du code de ce script : http://www.javascriptfr.com/code.aspx?id=29926 (auteur LARION).
J'ai programmé cette version en objet. Il est très facile d'utilisation, les fleches permettant d'activer le tri sur tel ou tel colonne sont ajoutées par le script dans les entêtes ainsi que les évènements correspondant (onClick).

Ce script utilise la très bonne librairie prototype.js que vous pouvez télécharger ici : http://prototype.conio.net/

Source / Exemple : 


EXEMPLE D'UTILISATION

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Trier des tableaux html</title>
  <script type="text/javascript" src="../prototype.js"></script>
  <script type="text/javascript" src="sortHTMLTable.js"></script>
</head>
<body>
<br>
<table id="users">
	<tr>
		<th>Number</th>
		<th>String</th>
		<th>Date</th>
	</tr>
	<tr>
		<td>12</td>
		<td>Albert</td>
		<td>23/02/1926</td>
	</tr>
	<tr>
		<td>4</td>
		<td>Roger</td>
		<td>12/10/1973</td>
	</tr>
	<tr>
		<td>1</td>
		<td>Celine</td>
		<td>13/12/1983</td>
	</tr>
	<tr>
		<td>1</td>
		<td>Isabelle</td>
		<td>19/03/1983</td>
	</tr>
	<tr>
		<td>-15</td>
		<td>Emily</td>
		<td>30/11/1983</td>
	</tr>
</table>
<table id="users2">
	<tr>
		<th>Number</th>
		<th>String</th>
		<th>Date</th>
	</tr>
	<tr>
		<td>22</td>
		<td>Francis</td>
		<td>23/02/1926</td>
	</tr>
	<tr>
		<td>45</td>
		<td>Frank</td>
		<td>12/10/1973</td>
	</tr>
	<tr>
		<td>11</td>
		<td>Raoul</td>
		<td>13/12/1983</td>
	</tr>
	<tr>
		<td>-1</td>
		<td>Joceline</td>
		<td>19/03/1983</td>
	</tr>
	<tr>
		<td>15</td>
		<td>Julie</td>
		<td>30/11/1983</td>
	</tr>	
</table>
<script type="text/javascript">
new sortHTMLTable( 'users' );
new sortHTMLTable( 'users2' );
</script>
</body>
</html>
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (zilx)