CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 11 23:47:53

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Divers

> TRI DYNAMIQUE DE TABLEAU HTML, MULTI COLONNES, ORIENTÉ OBJET, IE ET FF

TRI DYNAMIQUE DE TABLEAU HTML, MULTI COLONNES, ORIENTÉ OBJET, IE ET FF

Information sur la source

Note :

9,73 / 10

Catégorie :Divers Classé sous :tri, tableau, multicolonne Niveau :Débutant Date de création :08/01/2006 Date de mise à jour :14/04/2006 18:24:17 Vu / téléchargé :25 335 / 3 515

Auteur : vb1

Ecrire un message privé

Commentaire sur cette source (32)

Ajouter un commentaire et/ou une note

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

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>

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>

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

fleche_bas.png 154 octets
fleche_bas_active.png 145 octets
fleche_haut.png 152 octets
fleche_haut_active.png 143 octets
info.txt 2 180 octets
prototype.js 27 940 octets
sortHTMLTable.js 20 697 octets
test.html 1 967 octets
test2.htm 1 542 octets

Télécharger le zip

Historique

08 janvier 2006 01:10:34 :: Correction orthographe
14 janvier 2006 12:35:58 :: 14/01/2006 Version 1.5 - Fonctionne sous IE et FireFox - Possibilité de tri sur plusieurs colonnes : dans l'ordre naturel ( + importante en 1er ) avec affichage de l'index de chaque colonne. - Possibilité de modifier l'ordre d'affichage des colonne en fonction de leur ordre de tri ( option à l'instanciation ) - Il est possible de désactiver le tri d'une colonne en re-cliquant sur un bouton déjà actif. - 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 )
14 janvier 2006 12:56:13 :: Correction micro-bug d'affichage sous FireFox : dans certains cas le cadre autour de l'index restait visible quand la colonne n'était plus triée.
07 avril 2006 10:35:17 :: 07/04/2006 : Correction : meilleur gestion des cellules totalement vides sous FireFox
07 avril 2006 10:39:49 :: 07/04/2006 : Correction : meilleur gestion des cellules totalement vides sous FireFox
07 avril 2006 10:53:18 :: 07/04/2006 : Correction : meilleur gestion des cellules totalement vides sous FireFox
07 avril 2006 15:15:48 :: -
13 avril 2006 09:42:38 :: .
14 avril 2006 18:15:38 :: 07/04/2006 : Correction : meilleur gestion des cellules totalement vides sous FireFox
14 avril 2006 18:24:17 :: 07/04/2006 : Correction : meilleur gestion des cellules totalement vides sous FireFox

Sources de la même categorie

COLONNES ADAPTABLES EN HAUTEUR par dronoide

VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol

HTML5 PLAYER par kazma

SCROLLBAR PERSONNALISABLE par kazma

INFO BULLE par RudiRatlos

Toutes les sources de la catégorie Divers

Sources en rapport avec celle ci

MOOTABLEAU par Miky76

TRI DE TABLEAU, ALGORITHME LES PLUS CONNUS IMPLÉMENTÉS (FUSI... par the_wwt

AFFICHAGE, ÉDITION GRAPHIQUE DE TABLEAUX par thebmxeur

TRI DE TABLEAUX HTML par coucou747

TRI DE TABLEAU HTML, SCRIPT ORIENTÉ OBJET par zilx

Commentaires et avis

Commentaire de cacoucatatonique le 09/01/2006 09:52:47

je viens de le tester il est trés interesent par contre il ne fonctionne que avec de l'html, avec lephp impossible de faire effectuer la fonction.
existe t'il un moyen d'éliminer ce probleme?

Commentaire de twisteurwin le 09/01/2006 12:11:25

Oui l'url rewriting ^^

Commentaire de cacoucatatonique le 09/01/2006 14:20:59

en faite je crée un tableau avec des données sorties d'une base de donnée et à l'aide d'un for je me fait mon tableau, j'ai inseré ce code dans ma page php il ma bien rajouté les fleches mais quand je clic sur l'une d'entre elle rien ne se passe!!!
d'ou ma question de savoir si on pe l'integrer à du php

Commentaire de cacoucatatonique le 09/01/2006 14:24:56

et parcontre comment je peux taper dans cette url? elle est dans les pages javascript?

Commentaire de twisteurwin le 09/01/2006 16:10:24

cacoucatatonique >>
Nan en fait jdélirai avec mon url rewriting, jpouvais pas m'en empêcher, excuses moi ^^...
Bon d'après ce que je sais, en php quand tu veux classer des colonnes le plus simple c'est de le faire depuis ta requête !
Alors si tu veux classer chacune de tes colonnes en ascendant ou en descendant c'est plutôt simple à faire car ce sera du genre :(en supposant que ta connection Mysql est ouverte)
<?php // index.php par exemple
// ouvres ta connection...

echo'<a href="?lien=asc">lien avec id ascendant</a>
<a href="?lien=desc">lien avec id  descendant</a>';

if(!isset($_GET['lien'])){$_GET['lien'] = null;}
switch ($_GET['lien']){
    case 'asc': // requete par ordre id ASC
mysql_query('SELECT `id`,`colonnea` FROM `tableau` ORDER BY id ASC;');
    break;
    case 'desc': // requete par ordre id DESC
mysql_query('SELECT `id`,`colonnea` FROM `tableau` ORDER BY id DESC;');
    break;
    default: // requete par défaut, j'ai choisi ASC
mysql_query('SELECT `id`,`colonnea` FROM `tableau` ORDER BY id ASC;');
    break;
}
// tu fais ton while....
echo'';// et la tu met ton tableau
// tu fermes ton while....
// fermes ta connection :-)
?>

je te fais cet exemple vite fait mais il y a bien entendu plus simple mais j'ai pas le temps ...
ah oui dans cet exemple pas besoin de javascript ( certaines pers. désactivent le JS faut pas l'oublier...)
Si tu galères dis le moi je verra ca plus tard
+++ bon courage

Commentaire de cacoucatatonique le 09/01/2006 16:17:56

ok merci

Commentaire de galadriann le 11/01/2006 15:40:27

L'idee est excellent mais dommage que ca ne marche pas avec Firefox.

Commentaire de zilx le 13/01/2006 04:45:17

La version précédente propose moins d'option mais marche sur IE et FF.

http://www.javascriptfr.com/code.aspx?ID=35462

en attendant que celle-ci soit compatible avec FF

Amicalement

Commentaire de vb1 le 14/01/2006 12:57:23

Cette version fonctionne maintenant sous IE et FireFox

Commentaire de galadriann le 15/01/2006 17:52:56

C'est rare de trouver un code aussi bien pensé...

Je met donc 10... bravo ... très utile ... et la possibilités de déplacer les colonnes en fonction du tri ... très chouette...

Je suis en train de coder une gestion d'inventaire et je cherchais justement un outil pour trier les colonnes en multi-critere ... j'ai trouve... grand merci ...

Commentaire de zilx le 17/01/2006 09:50:19

Pour ceux que ça intéresse vous trouverez ici : http://htmltabletools.iassa.com/

une démo du script HTMLTableTools qui permet de trier vos tableaux HTML (tiré de ce script et du précédent) mais qui également colorise alternativement les lignes, met en surbrillance les lignes au survol de la souris, donne la possibilité de sélectionner une ou plusieurs lignes et de récupérer les id des lignes sélectionnées, ...
Vous pourrez également télécharger ce script sur la page démo.

Bon codage

Commentaire de darkin971 le 04/04/2006 03:06:59

moi du moment qu'il y a une image dans le tableau le script ne focntionne plus ... est ce normal ?? je suis sous firefox

Commentaire de Tartuffe le 06/04/2006 21:13:05

Hello !

J'ai essayé ton script, et celui du site mis en référence, sans faire de modif de path ou koi ke ce soit (bref tout dans le même répertoire....).
Sous ie, ca marche pour ton script, mais pas pour celui téléchargé, qui annonce l'existence d'une erreur sur click sur 'lignes sélectionnées'.
Pour mozilla aucun des scripts ne fonctionne.

Lorsque cela ne fonctionne pas, évidement, pas de message d'erreur. Le point comun de la malfonction, c'est "aucun affichage d'image flêche de tri". Alors pour cliquer, c'est pas simple [: - )

Une ID sur la source du problème qui empêche l'affichage des images ?

Commentaire de Tartuffe le 06/04/2006 21:27:15

Trouvé ....

C'est dans la déclaration du fichier '.js' à utiliser que la merde est !

<script type="text/javascript" src="tableTools.js"></script>
au lieu de :
<script type="text/javascript" src="HTMLtableTools.js"></script>

Corrige le, c'est dans tes fichiers "test.html"

Bonne nuit [: - )

Commentaire de burkho le 07/04/2006 14:13:07

Merci pour ce code, il est super bien pensé et donc il est vraiment très bon, et quand on trouve quelque chose de bon il faut le dire ;o)

Commentaire de burkho le 07/04/2006 14:13:28

Merci pour ce code, il est super bien pensé et donc il est vraiment très bon, et quand on trouve quelque chose de bon il faut le dire ;o)

Commentaire de bemawi le 16/05/2006 18:12:59

Yop, je cherchai un code pour lister mes mangas de façon "intelligente" et je suis tombé sur ce code après 4 grosses décèption. Un petit bijoux pour les novices comme moi.
Le seul problème, c'est qu'il si facile à utiliser que je n'ai même pas trop regarder le code ;o}

Pour ceux qui veulent un exemple de plus, http://bemawi.free.fr/mangas/

Je ne mets jamais de 10/10, mais 9 n'est pas bon, et il y'a pas de 9,9, donc je mets 10

Commentaire de bemawi le 16/05/2006 18:44:12

J'ai oublié, il fonctionne avec opera !

Commentaire de bouddha5 le 30/05/2006 01:39:33

Excellent script !
Par contre, sommes nous limités à 8 colonnes? Dès que je veux trier une 9ème colonne.. pouff! plus rien..

Commentaire de bouddha5 le 30/05/2006 14:46:17

Cà m'embêtait de problème de 9ème colonne et puis .. j'ai compris pourquoi!
Le problème vient que cette 9ème colonne ne contient aucun texte mais juste des images ( feu rouge, feu orange et feu vert pour que ce soit très visuel) et.. le script n'a pas l'air d'aimer.
Est il possible de savoir comment faire pour que ces images soient prises comme du texte?

Commentaire de fabrice_regnier le 14/06/2006 20:08:42

Salut,

Très bon script. Je te propose une amélioration:
Quand on a beaucoup de colonnes qu'on veut trier, on clique sur plusieurs flêches (bas et/ou haut), ...: ok
Mais lorsqu'on veut revenir à un simple tri (disons sur la 1ère colonne), alors, il faut cliquer sur tous les flêches rouges présentes avant de revenir à un état initial puis enfin de cliquer sur la flêche de la 1ère colonne dans mon exemple.

proposition: si on pouvait cliquer sur le titre de le colonne (pas sur les flêches), alors on trierai sur ce seul champ en asc. La flêche vers le haut serait rouge et on verrait le rang de tri n°1 apparaitre.

Qu'en penses-tu ?

merci pour ce script ;)

a+

f.

Commentaire de vallica le 21/09/2006 18:12:56

Super code, merci beaucoup il a fonctionné dès le premier coup !

Commentaire de piedpierre le 19/02/2007 09:40:40

Bonkour !!! ;)
Très beau script. J'ai un petit souci en l'incluant dans une table avec drag and drop de colonnes... Lorsqu'on drague-drope une colonne avec un insertBefore(col5,col2), il faudrait réorganiser les indexs.. sinon on se retrouve avec le tri de la colonne de départ... y a moyen de faire ca ?
Merqui...

Commentaire de piedpierre le 20/02/2007 12:55:47

Oui, ya toujours ce bug sur Ie quand une colonne ne contient qu'une image par exemple... la soluce c'est d'ajouter   (caractère d'espacement) dans cette colonne...

Commentaire de Tchupacabra le 09/06/2007 12:23:39

Merci beaucoup pour ce script vb1 et zilx !
Aussi, je contribue simplement en conseillant l'ajout du caractère € dans l'expression régulière déterminant le type de donnée...
ainsi ce tri devient possible :
115 €
84 €
222 €

devient :
84 €
115 €
222 €

et non :
115 €
222 €
84 €

@+

Commentaire de falomeflora le 29/08/2008 13:33:30

Merci Beaucoup pour le script! ça fonctionne très bien mais j'ai un problème lorsque mon tableau comporte des dates et heures à la fois qd ce sont seulement des dates ça tri très bien.
Merci d'avance pour vos réponses!!

Commentaire de falomeflora le 01/09/2008 13:18:02

Finalement j'ai trouvé comment faire le tri avec la date et l'heure!
je mets la modif ça pourra aidé certain:

On modifie la regex de la de date en ajoutant l'heure et la minuite :/^\d\d[\/-]\d\d[\/-]\d\d\d\d\s\d\d\:\d\d$/

et dans la structure conditionnelle switch on complète égalment l'heure et la minuite comme suite:

this.jsTable[rowCpt-1][cellCpt] = new Date (cellContent.substring(6,10),cellContent.substring(3,5)-1,cellContent.substring(0,2),cellContent.substring(11,13),cellContent.substring(14,16),cellContent.substring(17,19));

J'espère que c'est assez claire et que ça aidera certain.Merci encore pour le code

Commentaire de potimarron le 30/10/2008 13:48:18 9/10

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 ?

Commentaire de NeuNeu78 le 19/11/2008 10:30:55 10/10

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!!

Commentaire de Garthichow le 27/02/2009 09:56:44

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...

Commentaire de apoca62 le 20/04/2010 11:12:48 10/10

Trés utile, très bien fait, et surtout très simple à mettre en place. Merci

Commentaire de rbu2000 le 02/08/2011 10:13:32 10/10

Super code !

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

tableau avec tri dynamique [ par rcedric ] Salut a tous,voila mon probleme; je cherche à afficher un tableau et que lorsqu l'on clic sur le libellé le tableau est trié et réafficher dynamiqueme tri d'un tableau numérique [ par sylcasi ] bonjour,je suis encore en panne :comment faire pour trier un tableau numérique :sachant que c'est un tableau à plusieurs colonnes dont la première est pb tri tableau! [ par joduak ] salut je voudrai savoir comment on fait un tri d'un tableau javascript de nombres? genre: tableau[0]=4 tableau[1]=8 tableau[2]=23 etc...dans l'ordre c Tri de tableau associatif [ par cydelic ] Bonjour, J’ai un petit problème de tri... je vous explique Rien de bien compliquer, j’ai un tableau associatif du genre : var Tri de colonnes d'un tableau html grâce à un js [ par ebenedzer ] SalutJe n'arrive pas à trouver comment je peux trier les colonnes d'un tableau fait en html, à l'aide d'un javascript.Est-ce que je dois met Tri de tableau [ par Evangun ] Bonjour à tous,je me demande pourquoi quand je trie mon tableau alphabétiquement, ils sont tous bon sauf le premier qui est mis en dernière position ! Tri (fonction sort) [ par John_Doe_88 ] Salut tlm,J'utilise la fonction sort pour trier un tableau, mais ce tableau peut être très grand et dans ce cas j'obtiens un message dans le navigateu Tri (fonction sort) [ par John_Doe_88 ] Salut tlm,J'utilise la fonction sort pour trier un tableau, mais ce tableau peut être très grand et dans ce cas j'obtiens un message dans le navigateu Tri d'un tableau associatif [ par flexx ] BonjourJe souhaite savoir s'il est possible d'effectuer un tri sur un tableau associatif.Par exemple, si j'ai le tableau suivant :tab["val2"] = "test1 tri de tableau multiple [ par PROTECTIONNISTE ] Bonjour,Je voudrais pouvoir classer via un élèment de tableau et ressortir ce tri convenablement. j'expliques car pour le moment ça veut rien dire ;-)

Nos sponsors

Derniers Blogs

SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc

[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier

[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

Forum

RE : RéCUPéRER LA VALEUR D'UNE VARIABLE PHP POUR L'UTILISER EN JAVASCRIPT par stealone

RE : TRANSFARMATION DES VARIABLES par marlopremier

RE : ADAPTER UN SCRIPT POUR IE6 par Ewan83

ADAPTER UN SCRIPT POUR IE6 par Ewan83

RE : CREATION DE SCORING OU RATING par Alex16000

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Passerelle Pericles sur site Joomla 17
Budget : 499€
Infogerance Serveur Debian Linux
Budget : 2 400€
Developpeur applications iphone - ipad - android
Budget : 800€

Logiciels

PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011