begin process at 2012 02 14 04:26:42
  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 :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
Toutes les sources de jerms

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


Archos 5 Internet Tablette 500 Go
Entre 396€ et 444€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Happy Bright Landscape WIth ButterfliesPhoto Beautiful woman in a bikini meditating on the beach
Photo Tropical Location With Palm Tree and Woman Holding Umbrella 

Visiter la 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
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)