Tri dynamique de tableau html, multi colonnes, orienté objet, ie et ff

Télécharger le projet
Commenter

Description

Evolution du script : http://www.javascriptfr.com/code.aspx?ID=34180 (auteur zilx).
Pas besoins de modifier le tableau a trier :
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/

Ajouts:
- La flèche de tri utilisée devient rouge pour indiquer le sens de tri.
- Un nombre est ajouté dans le titre des colonnes triées pour indiquer l'ordre dans lequels elles ont été triées.
- La séléction des colonnes à trier se fait maintenant dans l'ordre naturel ! De la plus à la moins importante.
- Il est possible de désactiver le tri d'une colonne en re-cliquant sur un bouton déjà actif.
- Possibilité de modifier l'ordre d'affichage des colonne en fonction de leur ordre de tri ( option à l'instanciation )
- Recherche automatique du type de données dans les lignes suivantes si la 1ere est vide
- Remplacement des balises ( ...) par la fonction unescapeHTML de prototype.js pour ne pas géner l'ordre de tri
- Remplacement des accents pour ne pas géner l'ordre de tri ( ils restent à l'affichage )

Corrections:
- Fonctionne maintenant sous IE et FireFox
- La fonction de tri était appelée 2x à tort a cause d'un eventHandler "click" dupliqué ( sauf pour la 1ere colonne ).

Source / Exemple : 


UTILISATION : Voir lignes N° 8, 9, 13 et 48

<!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> 
<script type="text/javascript"> 
new sortHTMLTable( 'users' );  
</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.