begin process at 2012 02 14 04:26:42
  Trouver un code source :
 
dans
 
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 :11 745

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

 Sources de la même categorie

COLONNES ADAPTABLES EN HAUTEUR par dronoide
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol
Source avec Zip Source avec une capture HTML5 PLAYER par kazma
Source avec Zip Source avec une capture SCROLLBAR PERSONNALISABLE par kazma
Source avec Zip INFO BULLE par RudiRatlos

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

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
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 : 1,108 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales