TRI DYNAMIQUE DE TABLEAU , Source N°16340

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

Auteur : jerms

Ecrire un message privé

Note :

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

Sources du même auteur

Toutes les sources de jerms

Sources de la même categorie

Toutes les sources de la catégorie Divers

Commentaires

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