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

Soyez le premier à donner votre avis sur cette source.

Vue 33 505 fois - Téléchargée 4 705 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

cs_cacoucatatonique
Messages postés
164
Date d'inscription
vendredi 25 février 2005
Statut
Membre
Dernière intervention
7 octobre 2009
-
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?
cs_twisteurwin
Messages postés
167
Date d'inscription
mardi 21 septembre 2004
Statut
Membre
Dernière intervention
2 mai 2009
-
Oui l'url rewriting ^^
cs_cacoucatatonique
Messages postés
164
Date d'inscription
vendredi 25 février 2005
Statut
Membre
Dernière intervention
7 octobre 2009
-
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
cs_cacoucatatonique
Messages postés
164
Date d'inscription
vendredi 25 février 2005
Statut
Membre
Dernière intervention
7 octobre 2009
-
et parcontre comment je peux taper dans cette url? elle est dans les pages javascript?
cs_twisteurwin
Messages postés
167
Date d'inscription
mardi 21 septembre 2004
Statut
Membre
Dernière intervention
2 mai 2009
-
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'[?lien=asc lien avec id ascendant]
[?lien=desc lien avec id descendant]';

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

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.