Deux clicks au lieu d'un !

Version imprimable

Bonsoir,

Ce script trie une table HTML et en clickant sur
les entètes de chaque colonnes, on inverse le tri.

Cela tourne très bien, sauf que des fois, il faut
faire deux fois un click pour activer le tri !

Je vous joint le source pour que vous puissiez
tester le phénomène.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<script>
function cacher()
{
	document.getElementById('perff').style.display = 'none';
	document.getElementById('perfo2').style.display = 'block';
}
</script>
 
<SCRIPT LANGUAGE="JavaScript">
var index;
function  sort_int(p1,p2) { return p1[index]-p2[index]; }			//fonction pour trier les nombres
function sort_char(p1,p2) { return ((p1[index]>=p2[index])<<1)-1; }	//fonction pour trier les strings
var T_Dec = new Array();  
function TableOrder(col_, Dec) 
	{
  	 //-- test si Init
  	 if( T_Dec[col_] !=undefined)
  	 	{
     	 T_Dec[col_] = 1 -T_Dec[col_];  // inverse l'etat
		}
	 else 
	 	{
	     T_Dec[col_] = 1;  // par exemple
  		}
 
  	 Dec = T_Dec[col_];    // affectation pour le reste de la fonction
	 var FntSort = new Array()
  	 var oTable  = document.getElementById('T_DATA');
  	 index = col_;
  	 //---- Copier Tableau Html dans Table JavaScript ----//
  	 var Table = new Array()
	 for (r = 0; r < oTable.rows.length; r++) Table[r] = new Array()
  	 for (c = 0; c < oTable.rows[0].cells.length; c++) 
  	 	 {
    	  var Type;
		  var objet = oTable.rows[0].cells[c].innerHTML.replace(/<\/?[^>]+>/gi, "")
    	  if (objet.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) 
    	  	 {
      		  FntSort[c] = sort_char;
      		  Type = 0;
    		 } //date jj/mm/aaaa
    	  else if (objet.match(/^[0-9£?$\.\s-]+$/)) 
    	  	 {
      		  FntSort[c] = sort_int;
      		  Type = 1;
    		 } //nombre, numéraire
    	  else 
    	  	 {
      		  FntSort[c] = sort_char;
      		  Type = 2;
    		 } //Chaine de caractère
 
    	  for (r = 0; r < oTable.rows.length; r++) 
    	  	  {
      		   objet = oTable.rows[r].cells[c].innerHTML.replace(/<\/?[^>]+>/gi, "")
      		   switch (Type) 
      		   		  {
      				   case 0:
			           		Table[r][c] = new Date(objet.substring(6), objet.substring(3, 5), objet.substring(0, 2));
			           		break; //date jj/mm/aaaa
					   case 1:
			           		Table[r][c] = parseFloat(objet.replace(/[^0-9.-]/g, ''));
				       		break; //nombre
				       case 2:
        					Table[r][c] = objet.toLowerCase();
        					break; //Chaine de caractère
      				  }
      		   Table[r][c + oTable.rows[0].cells.length] = oTable.rows[r].cells[c].innerHTML
    		  }
  		   }
  			//--- Tri Table ---//
  			Table.sort(FntSort[index]);
  			if (Dec) Table.reverse();
  			//---- Copier Table JavaScript dans Tableau Html ----//
  			for (c = 0; c < oTable.rows[0].cells.length; c++) 
  				{ //Sur toutes les cellules
    			 for (r = 0; r < oTable.rows.length; r++) 
    			 	{ //De toutes les rangées 
      				 oTable.rows[r].cells[c].innerHTML = Table[r][c + oTable.rows[0].cells.length];
    				}
  				}
	}
</SCRIPT>
 
<style>
.tr1 { cursor:pointer; } /* Petite Main sur TR */
</style>
 
</head>
 
<body>
<table border="1" width="100%" id="table1">
	<tr class="tr1" >
		<th onclick="TableOrder(0,1);" align="center"><b>--- 1 ---</b></th>
		<th onclick="TableOrder(1,1);" align="center"><b>--- 2 ---</b></th>
		<th onclick="TableOrder(2,1);" align="center"><b>--- 3 ---</b></th>
		<th onclick="TableOrder(3,1);" align="center"><b>--- 4 ---</b></th>
		<th onclick="TableOrder(4,1);" align="center"><b>--- 5 ---</b></th>
	</tr>
</table>
 
<table id="T_DATA" border="1" width="100%" id="table2">
	<tr>
		<td>1111111111</td>
		<td>1111111111</td>
		<td>1111111111</td>
		<td>1111111111</td>
		<td>1111111111</td>
	</tr>
	<tr>
		<td>2222222222</td>
		<td>2222222222</td>
		<td>2222222222</td>
		<td>2222222222</td>
		<td>2222222222</td>
	</tr>
	<tr>
		<td>3333333333</td>
		<td>3333333333</td>
		<td>3333333333</td>
		<td>3333333333</td>
		<td>3333333333</td>
	</tr>
	<tr>
		<td>4444444444</td>
		<td>4444444444</td>
		<td>4444444444</td>
		<td>4444444444</td>
		<td>4444444444</td>
	</tr>
	<tr>
		<td>5555555555</td>
		<td>5555555555</td>
		<td>5555555555</td>
		<td>5555555555</td>
		<td>5555555555</td>
	</tr>
</table>
 
</body>
 
</html>

si l'on met un alert:

Code:

alert('tri')

en première ligne de la fonction, on voit que la fonction est bien appelée, mais que le tri ne s'effectue pas ... il s'agit donc d'un souci d'attribution de tes variables flag sur lesquelles tu fais un test

un alert de Dec montre qu'il n'est pas modifié lorsque l'on clique sur une autre colonne

En fait tu gères un ordre de tri par colonne mais tu fais le tri au global sur toutes les colonnes ...
fais le tri sur l'ordre stocké de la colonne ?

Code:

if ( T_Dec[col_] ) Table.reverse();

Ou dis nous quel genre de tri tu recherches ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
<script>
function cacher()
{
	document.getElementById('perff').style.display = 'none';
	document.getElementById('perfo2').style.display = 'block';
}
</script>
 
<SCRIPT LANGUAGE="JavaScript">
var index;
function  sort_int(p1,p2) { return p1[index]-p2[index]; }			//fonction pour trier les nombres
function sort_char(p1,p2) { return ((p1[index]>=p2[index])<<1)-1; }	//fonction pour trier les strings
var T_Dec = new Array();  
function TableOrder(col_, Dec) 
	{
  	 //-- test si Init
  	 if( T_Dec[col_]!=undefined)
  	 	{
     	 T_Dec[col_]=(T_Dec[col_] == 0)?1:0;  // inverse l'etat
		}
	 else 
	 	{
	     T_Dec[col_] = 0	     ;  // par exemple
  		}
 
 
  	 Dec = T_Dec[col_];    // affectation pour le reste de la fonction
    alert(Dec)
	 var FntSort = new Array()
  	 var oTable  = document.getElementById('T_DATA');
  	 index = col_;
  	 //---- Copier Tableau Html dans Table JavaScript ----//
  	 var Table = new Array()
	 for (r = 0; r < oTable.rows.length; r++) Table[r] = new Array()
  	 for (c = 0; c < oTable.rows[0].cells.length; c++) 
  	 	 {
    	  var Type;
		  var objet = oTable.rows[0].cells[c].innerHTML.replace(/<\/?[^>]+>/gi, "")
    	  if (objet.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) 
    	  	 {
      		  FntSort[c] = sort_char;
      		  Type = 0;
    		 } //date jj/mm/aaaa
    	  else if (objet.match(/^[0-9£?$\.\s-]+$/)) 
    	  	 {
      		  FntSort[c] = sort_int;
      		  Type = 1;
    		 } //nombre, numéraire
    	  else 
    	  	 {
      		  FntSort[c] = sort_char;
      		  Type = 2;
    		 } //Chaine de caractère
 
    	  for (r = 0; r < oTable.rows.length; r++) 
    	  	  {
      		   objet = oTable.rows[r].cells[c].innerHTML.replace(/<\/?[^>]+>/gi, "")
      		   switch (Type) 
      		   		  {
      				   case 0:
			           		Table[r][c] = new Date(objet.substring(6), objet.substring(3, 5), objet.substring(0, 2));
			           		break; //date jj/mm/aaaa
					   case 1:
			           		Table[r][c] = parseFloat(objet.replace(/[^0-9.-]/g, ''));
				       		break; //nombre
				       case 2:
        					Table[r][c] = objet.toLowerCase();
        					break; //Chaine de caractère
      				  }
      		   Table[r][c + oTable.rows[0].cells.length] = oTable.rows[r].cells[c].innerHTML
    		  }
  		   }
  			//--- Tri Table ---//
  			Table.sort(FntSort[index]);
  			if ( T_Dec[col_] ) Table.reverse();
  			//---- Copier Table JavaScript dans Tableau Html ----//
  			for (c = 0; c < oTable.rows[0].cells.length; c++) 
  				{ //Sur toutes les cellules
    			 for (r = 0; r < oTable.rows.length; r++) 
    			 	{ //De toutes les rangées 
      				 oTable.rows[r].cells[c].innerHTML = Table[r][c + oTable.rows[0].cells.length];
    				}
  				}
 
	}
</SCRIPT>

05/03/2010, 12h01
malabarbe
Bonjour SpaceFrog,

A l'origine dans chaque entète de colonne, il y avait :

- Un caractère Ascii qui représentait une flèche qui pointait vers le haut
- Le texte de l'entète
- Un caractère Ascii qui représentait une flèche qui pointait vers le bas
Code:

1 2 3 4 5 // Flèche du haut TableOrder(3,1); // Flèche du bas TableOrder(3,0);
Mais dans mon vrai tavleau j'ai des colonnes qui ne font qu'un
seul caractère de largeur.

J'ai donc voulu supprimer les flèches pour réduire la largeur de la colonne
L'idée, c'était qu'un click inverse le processus de tri a chaque click.

Si l'état d'un colonne est a zéro, si on envoie dans la fonction zéro,
c'est normal qu'il faille clicker une deuzième fois pour inverser l'état.

J'ai esseyé de faire des if Dec==0 -->1, Dec==1-->0
Mais le soucis reste.
J'ai testé également :
Code:

1 2 <td onclick="TableOrder(3,this)" align="center"><b>--- 4 ---</b></td>
Cela ne va pas non plus.
05/03/2010, 13h51
SpaceFrog

il faut surtout tester par rapport au sens de tri de la colonne stcoké dans ton array et faire un truc du genre

Code:

T_Dec[col_]=T_Dec[col_]?1:0

et ne travailler qu'avec l'array donc plus besoin de Dec utilise uniquement

T_Dec[col_]
08/03/2010, 13h07
malabarbe

Bonjour SpaceFrog,

Ok, j'ai fait le Dec seul et cela tourne Impec.

Merci pour le coup de main

@ +