Deux clicks au lieu d'un ! par Malabarbe - page 1

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.

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

Malabarbe

4 mars 2010 à 20:37:19

Golmote

4 mars 2010 à 21:05:40

Bon, je ne parlerais pas de la laideur du code...

Mais c'est quoi le deuxième paramètre de la fonction, le 'Dec', il représente quoi ?

4 mars 2010 à 21:14:31

Bonsoir Golmote,

C'était pour éviter de placer 2 flèches dans une
entète pour trier vers le haut ou vers le bas.

Maintenant, il suffit de clicker une fois sur
l'entète de le colonne et le tri s'inverse.

Je sais, le code n'est pas très propre et est
certainement loin d'être parfait, c'est pourquoi
je me tourne vers le forum.

Deux clicks au lieu d'un !

Deux clicks au lieu d'un !

Supprimer

Modérer

Signaler le message aux modérateurs