begin process at 2010 03 22 09:16:01
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Divers

 > TRI DYNAMIQUE DE TABLEAU

TRI DYNAMIQUE DE TABLEAU


 Information sur la source

Note :
8,8 / 10 - par 5 personnes
8,80 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Divers Niveau :Débutant Date de création :04/08/2003 Date de mise à jour :04/08/2003 11:56:55 Vu :9 796
Auteur : jerms

Ecrire un message privé
Commentaire sur cette source (4)
Ajouter un commentaire et/ou une note

 Description

Un script pour vous permettre de trier un tableau dynamiquement sans recharger la page.
Permet de trier un tableau à plusieurs colonnes, suffit de créer un tableau pour chaque colonne.

Copier-coller et ca roule.

Source

  • <html><head>
  • <title>Tri dynamique de tableau</title>
  • <style>
  • .Titre1 { color:BA0000; font-family:'Arial'; font-weight:bold; text-decoration:underline; font-size:15pt; }
  • .Titre2 { color:white; background-color:BA0000; font-family:'Arial'; font-weight:bold; font-size:13pt; }
  • .Titre3 { color:white; background-color:BA0000; font-family:'Arial'; font-weight:bold; font-size:12pt; }
  • .Titre4 { color:black; background-color:E57D7D; font-family:'Arial'; font-weight:bold; font-size:11pt; }
  • .Corps { color:black; font-family:'Arial'; font-size:11pt; }
  • td { vertical-align:top; }
  • a { COLOR:BA0000; TEXT-DECORATION: none }
  • a:hover { COLOR:BA0000; TEXT-DECORATION: underline overline }
  • </style>
  • </head>
  • <BODY onLoad="triTab(1)">
  • <script langage="javascript">
  • var tabNum = new Array("#001","#002","#003","#004","#005","#006","#007","#008","#009","#010");
  • var tabNom = new Array("Dupont","Martin","Toto","Alain","Lulu","Jacques","Laurent","André","Dupond","Marcel");
  • var tabDesc = new Array("Homme","Femme","Homme","Autre","Femme","Autre","Homme","Femme","Femme","Homme");
  • function triTab(tabind) {
  • var temp;
  • var ind01;
  • var ind02;
  • var tmptab;
  • switch (tabind) {
  • case 1 :
  • tmptab = tabNum ;
  • break;
  • case 2 :
  • tmptab = tabNom ;
  • break;
  • case 3 :
  • tmptab = tabDesc ;
  • break;
  • }
  • for (ind01 = tmptab.length-1; ind01 >= 0; ind01--) {
  • for (ind02 = tmptab.length-1; ind02 >= 0; ind02--) {
  • if (tmptab[ind02] < tmptab[ind01]) {
  • temp = tabNum[ind02];
  • tabNum[ind02] = tabNum[ind01];
  • tabNum[ind01] = temp;
  • temp = tabNom[ind02];
  • tabNom[ind02] = tabNom[ind01];
  • tabNom[ind01] = temp;
  • temp = tabDesc[ind02];
  • tabDesc[ind02] = tabDesc[ind01];
  • tabDesc[ind01] = temp;
  • }
  • }
  • }
  • // construction du tableau
  • temp = "<table border='0' width='100%' class='Corps'><tr><td colspan='3' class='Titre4'>Tableau :</td></tr>";
  • temp += "<tr><td><a href='#top' onClick='triTab(1)'>par Num</a></td><td><a href='#top' onClick='triTab(2)'>par Nom</a></td><td><a href='#top' onClick='triTab(3)'>par Sexe</a></td></tr>"
  • for (ind01 = 0; ind01 < tabNum.length; ind01++) { temp += "<tr><td>" + tabNum[ind01] + "</td><td>" + tabNom[ind01] + "</td><td>" + tabDesc[ind01] + "</td></tr>"; }
  • temp += "</table>";
  • document.getElementById("tab").innerHTML = temp;
  • }
  • </script>
  • <center>
  • <a name="top"></a>
  • <div id="tab">&nbsp</div>
  • </center>
  • </body>
  • </html> 
<html><head>
<title>Tri dynamique de tableau</title>
<style>
  .Titre1 { color:BA0000; font-family:'Arial'; font-weight:bold; text-decoration:underline; font-size:15pt; }
  .Titre2 { color:white; background-color:BA0000; font-family:'Arial'; font-weight:bold; font-size:13pt; }
  .Titre3 { color:white; background-color:BA0000; font-family:'Arial'; font-weight:bold; font-size:12pt; }
  .Titre4 { color:black; background-color:E57D7D; font-family:'Arial'; font-weight:bold; font-size:11pt; }
  .Corps { color:black; font-family:'Arial'; font-size:11pt; }
  td { vertical-align:top; }
  a { COLOR:BA0000; TEXT-DECORATION: none }
  a:hover { COLOR:BA0000; TEXT-DECORATION: underline overline }
</style>
</head>

<BODY onLoad="triTab(1)">
<script langage="javascript">
var tabNum = new Array("#001","#002","#003","#004","#005","#006","#007","#008","#009","#010");

var tabNom = new Array("Dupont","Martin","Toto","Alain","Lulu","Jacques","Laurent","André","Dupond","Marcel");

var tabDesc = new Array("Homme","Femme","Homme","Autre","Femme","Autre","Homme","Femme","Femme","Homme");

function triTab(tabind) {
  var temp;
  var ind01;
  var ind02;
  var tmptab;

  switch (tabind) {
  case 1 :
    tmptab = tabNum ;
    break;
  case 2 :
    tmptab = tabNom ;
    break;
  case 3 :
    tmptab = tabDesc ;
    break;
  }

  for (ind01 = tmptab.length-1; ind01 >= 0; ind01--) {
    for (ind02 = tmptab.length-1; ind02 >= 0; ind02--) {
      if (tmptab[ind02] < tmptab[ind01]) {
        temp = tabNum[ind02];
        tabNum[ind02] = tabNum[ind01];
        tabNum[ind01] = temp;
        temp = tabNom[ind02];
        tabNom[ind02] = tabNom[ind01];
        tabNom[ind01] = temp;
        temp = tabDesc[ind02];
        tabDesc[ind02] = tabDesc[ind01];
        tabDesc[ind01] = temp;
      }
    }        
  }

// construction du tableau
  temp = "<table border='0' width='100%' class='Corps'><tr><td colspan='3' class='Titre4'>Tableau :</td></tr>";
  temp += "<tr><td><a href='#top' onClick='triTab(1)'>par Num</a></td><td><a href='#top' onClick='triTab(2)'>par Nom</a></td><td><a href='#top' onClick='triTab(3)'>par Sexe</a></td></tr>"
  for (ind01 = 0; ind01 < tabNum.length; ind01++) { temp += "<tr><td>" + tabNum[ind01] + "</td><td>" + tabNom[ind01] + "</td><td>" + tabDesc[ind01] + "</td></tr>"; }
  temp += "</table>";
  document.getElementById("tab").innerHTML = temp;
}
</script>
<center>
<a name="top"></a>
<div id="tab">&nbsp</div>
</center>
</body>
</html>

 Conclusion

Des questions, des remarques, .... allez-y


 Sources du même auteur

CALCUL DU NUMÉRO DE LA SEMAINE
Source avec Zip ALBUM PHOTOS EN JAVASCRIPT
SUPPRIMER LA FRAME DE PUB ET LES POPUPS CHEZ IFRANCE
HORLOGE DÉCADÉCIMALE
Source avec une capture UNE DEMI-HORLOGE À AIGUILLES ENTIÈREMENT PARAMETRABLE
Toutes les sources de jerms

 Sources de la même categorie

Source avec Zip Source avec une capture SÉQUENCEUR par jdmcreator
Source avec Zip COMPRESSION DE TEXTE CÔTÉ CLIENT EN JS VIA ALGORYTHME LZW par niamor36
Source avec Zip VIRTUAL IPHONE (V.2) par loicseg
Source avec Zip MOOTABLEAU par Miky76
Source avec Zip CALCULER VOTRE IMC par lesnouesremy
Toutes les sources de la catégorie Divers

Commentaires et avis

Commentaire de cctiger le 18/08/2003 10:00:40

Ce petit script est pas mal du tout en revanche j'aurais voulu savoir comment faire pour faire un tri dans l'ordre inverse ???

De A à Z c'est ce qui est fait mais de Z à A comment faire ???

Merci de me répondre si kkun a une idée !!!!

cédric.larcher@tiscali.fr

Commentaire de cctiger le 18/08/2003 10:45:10

Désolé d'avoir mis ce commentaire pour rien !!!

En fait j'avais juste oublié un tit "=" qui faisait planté mon code :)))

J'ai donc la solution :))))

Commentaire de francktfr le 18/08/2003 10:54:22

ca va, pas trop dur de pomper le code des autres:
http://www.javascriptfr.com/article.aspx?ID=146

cctiger :
Pour inverser le tri c'est facile, je vais mettre une source aujourd'hui ...

Commentaire de jerms le 25/08/2003 16:48:40

En regardant les 2 sources on voit bien que ce n'est pas du pomper, mais inspiré, si j'avais changer les variables personnes n'aurait rien vu.

Et si ma source était exactement la même que l'autre je ne l'aurai pas mise. Par ailleurs si tu veux t'amuser à réinventer la roue a chaque nouvelle source, bonne chance ;)

Mais je ne cache pas que cela m'a servie de base, et à ce que je sache, les codes sont pour s'en servir ?
A+
jerm's

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Console Microsoft Xbox 360 Elite
Entre 299€ et 300€

Visiter le guide achat

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,156 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)