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

Soyez le premier à donner votre avis sur cette source.

Vue 33 565 fois - Téléchargée 4 710 fois

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>

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

rbu2000
Messages postés
1
Date d'inscription
lundi 27 octobre 2003
Statut
Membre
Dernière intervention
2 août 2011
-
Super code !
apoca62
Messages postés
2
Date d'inscription
mardi 20 avril 2010
Statut
Membre
Dernière intervention
16 juin 2010
-
Trés utile, très bien fait, et surtout très simple à mettre en place. Merci
Garthichow
Messages postés
1
Date d'inscription
vendredi 27 février 2009
Statut
Membre
Dernière intervention
27 février 2009
-
Bonjour,
petite question idiote, tout est ok pour moi, mais j'aimerais casser le système de tri multi colonne et faire 'tu cliques ça trie, si tu cliques autre part ça devient le tri principal'.
Bon alors, ça ne doit pas être gd chose mais je n'ai pas trouvé :-)

Merci beaucoup...
NeuNeu78
Messages postés
4
Date d'inscription
jeudi 7 avril 2005
Statut
Membre
Dernière intervention
19 novembre 2008
-
Excellent marche niquel j'étais parti pour en faire une(de fonction de trie) mais j'ai chercher sur google et je suis tomber ici et c'est exactement ce que je cherchais, et puis sa fait tout tout seul, c'est magnifique!!
cs_potimarron
Messages postés
1
Date d'inscription
mardi 3 juin 2008
Statut
Membre
Dernière intervention
30 octobre 2008
-
Bonjour, il est absolument génial ce script et merci, j'ai un souci par contre, ça ne marche pas sur IE6... une solution est-elle envisageable ?

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.