begin process at 2008 08 28 21:52:29
1 233 393 membres
485 nouveaux aujourd'hui
14 291 membres club

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum.
Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

TRI DYNAMIQUE DE TABLEAU


Information sur la source

Catégorie :Divers Niveau : Débutant Date de création : 04/08/2003 Date de mise à jour : 04/08/2003 11:56:55 Vu : 7 989

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

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
  • signaler à un administrateur
    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

  • signaler à un administrateur
    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 :))))

  • signaler à un administrateur
    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 ...

  • signaler à un administrateur
    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

Pub



Appels d'offres

Recherche developpeur ...
Budget : 700€
SITE MARCHAND LOCATION...
Budget : 3 000€
SITE MARCHAND POUR HOTEL
Budget : 4 000€

CalendriCode

Août 2008
LMMJVSD
    123
45678910
11121314151617
18192021222324
25262728293031

VS Express FR Gratuit !

VS Express en français et 100% gratuit !

Boutique

Boutique de goodies CodeS-SourceS