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 : Sélectionner tout - Visualiser dans une fenêtre à part
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>